<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>摩擦焊工位</title>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <meta name="keywords" content="" />
  <meta name="description" content="" />
  <link href="css/bootstrap.min.css?v=3.3.7" rel="stylesheet" />
  <link href="css/font-awesome.min.css?v=4.7.0" rel="stylesheet" />
  <!-- bootstrap-table 表格插件样式 -->
  <link href="ajax/libs/bootstrap-table/bootstrap-table.min.css?v=1.22.6" rel="stylesheet" />
  <link href="css/animate.min.css?v=20210831" rel="stylesheet" />
  <link href="css/style.min.css?v=20210831" rel="stylesheet" />
  <link href="ruoyi/css/ry-ui.css?v=4.8.0" rel="stylesheet" />

  <script src="js/jquery.min.js?v=3.6.3"></script>
  <script src="js/bootstrap.min.js?v=3.3.7"></script>
  <!-- bootstrap-table 表格插件 -->
  <script src="ajax/libs/bootstrap-table/bootstrap-table.min.js?v=1.22.6"></script>
  <script src="ajax/libs/bootstrap-table/locale/bootstrap-table-zh-CN.min.js?v=1.22.6"></script>
  <script src="ajax/libs/bootstrap-table/extensions/mobile/bootstrap-table-mobile.js?v=1.22.6"></script>
  <!-- jquery-validate 表单验证插件 -->
  <script src="ajax/libs/validate/jquery.validate.min.js?v=1.21.0"></script>
  <script src="ajax/libs/validate/jquery.validate.extend.js?v=1.21.0"></script>
  <script src="ajax/libs/validate/messages_zh.js?v=1.21.0"></script>
  <!-- bootstrap-table 表格树插件 -->
  <script src="ajax/libs/bootstrap-table/extensions/tree/bootstrap-table-tree.min.js?v=1.22.6"></script>
  <!-- 遮罩层 -->
  <script src="ajax/libs/blockUI/jquery.blockUI.js?v=2.70.0"></script>
  <script src="ajax/libs/iCheck/icheck.min.js?v=1.0.3"></script>
  <script src="ajax/libs/layer/layer.min.js?v=3.7.0"></script>
  <script src="ajax/libs/layui/layui.min.js?v=2.8.18"></script>
  <script src="ruoyi/js/common.js?v=4.8.0"></script>
  <script src="ruoyi/js/ry-ui.js?v=4.8.0"></script>
</head>

<body>
  <div id="friction-welding">
    <div class="main-con">
      <div class="top">
        <!-- <div class="monitor-wrapper"> -->
        <div class="monitor-header">
          <div class="left">
            <div class="normal-status">
              <img src="img/loading/normal-status.png" alt="" srcset="">
            </div>
            <div class="djsl-warning warning-box">
              <div class="warning-content">
                <div class="warning-title">报警</div>
                <div class="warning-text">
                  刀具水冷机异常报警
                </div>
              </div>
              <div class="warning-mark">
                <img src="img/loading/alert.png" alt="" srcset="">
              </div>
            </div>
            <div class="zzsl-warning warning-box">
              <div class="warning-content">
                <div class="warning-title">报警</div>
                <div class="warning-text">
                  主轴水冷机异常报警
                </div>
              </div>
              <div class="warning-mark">
                <img src="img/loading/alert.png" alt="" srcset="">
              </div>
            </div>
            <div class="skxt-warning warning-box">
              <div class="warning-content">
                <div class="warning-title">数控系统报警</div>
              </div>
              <div class="warning-mark">
                <img src="img/loading/alert.png" alt="" srcset="">
              </div>
            </div>
            <div class="cxdwbj-warning warning-box">
              <div class="warning-content">
                <div class="warning-title">侧向定位报警报警</div>
                <div class="warning-text">
                  异常侧向定位数量：<span></span> 个
                </div>
              </div>
              <div class="warning-mark">
                <img src="img/loading/alert.png" alt="" srcset="">
              </div>
            </div>
            <div class="yb-warning warning-box">
              <div class="warning-content">
                <div class="warning-title">压板报警</div>
                <div class="warning-text">
                  异常压板数量：<span></span> 个
                </div>
              </div>
              <div class="warning-mark">
                <img src="img/loading/alert.png" alt="" srcset="">
              </div>
            </div>
            <div class="zjz-warning warning-box">
              <div class="warning-content">
                <div class="warning-title">主机轴报警</div>
                <div class="warning-text">
                  异常主机数量：<span></span> 个
                </div>
              </div>
              <div class="warning-mark">
                <img src="img/loading/alert.png" alt="" srcset="">
              </div>
            </div>
            <div class="cxdw-warning warning-box">
              <div class="warning-content">
                <div class="warning-title">侧向定位报警</div>
                <div class="warning-text">
                  异常侧向定位数量： <span></span> 个
                </div>
              </div>
              <div class="warning-mark">
                <img src="img/loading/alert.png" alt="" srcset="">
              </div>
            </div>
            <div class="ct-warning warning-box">
              <div class="warning-content">
                <div class="warning-title">侧推报警</div>
                <div class="warning-text">
                  侧向侧推报警: <span></span> 个
                </div>
              </div>
              <div class="warning-mark">
                <img src="img/loading/alert.png" alt="" srcset="">
              </div>
            </div>
            <div class="sfdj-warning warning-box">
              <div class="warning-content">
                <div class="warning-title">伺服电机报警</div>
                <div class="warning-text">
                  伺服电机数量： <span></span> 个
                </div>
              </div>
              <div class="warning-mark">
                <img src="img/loading/alert.png" alt="" srcset="">
              </div>
            </div>
            <div class="hd-warning warning-box">
              <div class="warning-content">
                <div class="warning-title">换刀报警</div>
                <div class="warning-text">
                  伺服换刀数量： <span></span> 个
                </div>
              </div>
              <div class="warning-mark">
                <img src="img/loading/alert.png" alt="" srcset="">
              </div>
            </div>
            <div class="xc-warning warning-box">
              <div class="warning-content">
                <div class="warning-title">小车报警</div>
                <div class="warning-text">
                  异常小车数量： <span></span> 个
                </div>
              </div>
              <div class="warning-mark">
                <img src="img/loading/alert.png" alt="" srcset="">
              </div>
            </div>
            <div class="sjdb-warning warning-box">
              <div class="warning-content">
                <div class="warning-title">升降垫板报警</div>
                <div class="warning-text">
                  异常升降垫板数量： <span></span> 个
                </div>
              </div>
              <div class="warning-mark">
                <img src="img/loading/alert.png" alt="" srcset="">
              </div>
            </div>
            <img src="img/loading/welding-big-bg-full.png" class="structure" />
            <div class="bpq-warning warning-box">
              <div class="warning-content">
                <div class="warning-title">报警</div>
                <div class="warning-text">
                  变频器数量：<span></span> 个
                </div>
              </div>
              <div class="warning-mark">
                <img src="img/loading/alert.png" alt="" srcset="">
              </div>
            </div>
          </div>
          <!-- 报警信息 -->
          <div class="tip-wrapper">
            <img src="img/loading/tip.png" class="tip" id="tip" />
            <div class="tip-wrapper-list" id="tip-wrapper-list">
              <img src="img/loading/tip-header.png" class="tip-header" style="width: 100%; height: 80px" />
              <div id="tip-wrapper-list-content" class="tip-wrapper-list-content">
              </div>
            </div>
          </div>
        </div>
        <!-- </div> -->
      </div>
      <div class="middle">
        <div class="flex left">
          <div class="flex">
            <div class="upper-welding">
              <div class="left">
                <div class="title-con">
                  <div>上机头焊接</div>
                </div>
                <div class="content-container">
                  <div class="line"></div>
                  <div class="left-top-bar bar" style="height: 15px"></div>
                  <div class="right-top-bar bar" style="height: 15px"></div>
                  <div class="left-bottom-bar bar" style="height: 15px"></div>
                  <div class="right-bottom-bar bar" style="height: 15px"></div>
                  <div class="content">
                    <div class="flex" style="flex: 0;">
                      <div class="monitor-count-status">
                        <div class="monitor-count-status-desc">
                          <div class="title">定位焊刀具寿命</div>
                          <!-- 用 div 替代 el-progress -->
                          <div class="flex">
                            <div class="progress">
                              <div id="upperPosWeldToolLife" class="progress-bar" role="progressbar" aria-valuenow="95"
                                aria-valuemin="0" aria-valuemax="100">
                              </div>
                            </div>
                            <div class="num"><span class="upperPosWeldToolLife"></span>Y</div>
                          </div>
                        </div>
                      </div>
                      <div class="monitor-count-status">
                        <div class="monitor-count-status-desc">
                          <div class="title">正式焊刀具寿命</div>
                          <!-- 用 div 替代 el-progress -->
                          <div class="flex">
                            <div class="progress">
                              <div id="upperFinalWeldToolLife" class="progress-bar" role="progressbar"
                                aria-valuenow="95" aria-valuemin="0" aria-valuemax="100">
                              </div>
                            </div>
                            <div class="num"><span class="upperFinalWeldToolLife"></span>Y</div>
                          </div>
                        </div>
                      </div>
                    </div>
                    <div class="collapse-con">
                      <div class="icon">
                        <div>收起</div>
                        <img src="img/loading/collapse-icon.png" alt="">
                      </div>
                    </div>
                    <div class="position-container">
                      <div class="flex">
                        <div class="middle-content">
                          <div class="left-content">
                            <div class="bar-item">
                              <div class="left">
                                <div class="left-bar" style="background: #24eacd"></div>
                                <div class="title" style="color: #24eacd">
                                  定位焊接Z轴位置
                                </div>
                              </div>
                              <div style="color: #24eacd"><span class="upperPosWeldZ"></span>m</div>
                            </div>
                            <div class="bar-item">
                              <div class="left">
                                <div class="left-bar" style="background: #fffa92"></div>
                                <div class="title" style="color: #fffa92">
                                  定位焊主轴转速
                                </div>
                              </div>
                              <div style="color: #fffa92"><span class="upperPosWeldSpindleSpeed"></span>m/s</div>
                            </div>
                            <div class="bar-item">
                              <div class="left">
                                <div class="left-bar" style="background: #13e7ff"></div>
                                <div class="title" style="color: #13e7ff">
                                  定位焊主轴扭矩
                                </div>
                              </div>
                              <div style="color: #13e7ff"><span class="upperPosWeldSpindleTorque"></span>m</div>
                            </div>
                          </div>
                        </div>
                        <div class="middle-content">
                          <div class="left-content">
                            <div class="bar-item">
                              <div class="left">
                                <div class="left-bar" style="background: #24eacd"></div>
                                <div class="title" style="color: #24eacd">
                                  正式焊接Z轴位置
                                </div>
                              </div>
                              <div style="color: #24eacd"><span class="upperFinalWeldZ"></span>m</div>
                            </div>
                            <div class="bar-item">
                              <div class="left">
                                <div class="left-bar" style="background: #fffa92"></div>
                                <div class="title" style="color: #fffa92">
                                  正式焊主轴转速
                                </div>
                              </div>
                              <div style="color: #fffa92"><span class="lowerFinalWeldSpindleSpeed"></span>m</div>
                            </div>
                            <div class="bar-item">
                              <div class="left">
                                <div class="left-bar" style="background: #13e7ff"></div>
                                <div class="title" style="color: #13e7ff">
                                  正式焊主轴扭矩
                                </div>
                              </div>
                              <div style="color: #13e7ff"><span class="lowerFinalWeldSpindleTorque"></span>m</div>
                            </div>
                          </div>
                        </div>
                      </div>
                      <div class="bottom-content running-status">
                        <div class="flex row">
                          <div class="common-item">
                            <div class="title">焊接X轴位置</div>
                            <div class="status yellow "><span class="upperWeldingX"></span>m</div>
                          </div>
                          <div class="common-item">
                            <div class="title">焊接进给速度</div>
                            <div class="status yellow "><span class="upperWeldFeed"></span>m/s</div>
                          </div>
                          <div class="common-item">
                            <div class="title">恒压力Z轴调整值</div>
                            <div class="status yellow"><span class="upperConstPressureZAdj"></span>m/s</div>
                          </div>
                          <div class="common-item">
                            <div class="title">焊接Y轴位置</div>
                            <div class="status yellow "><span class="upperWeldingY"></span>m</div>
                          </div>
                          <div class="common-item">
                            <div class="title">焊接压力实时值</div>
                            <div class="status yellow"><span class="upperWeldPressureReal"></span>w</div>
                          </div>
                          <div class="common-item">
                            <div class="title">焊接压力设定值</div>
                            <div class="status yellow"><span class="upperWeldPressureSet"></span>w</div>
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                  <div class="line"></div>
                </div>
              </div>
            </div>
            <div class="down-welding">
              <div class="left">
                <div class="title-con">
                  <div>下机头焊接</div>
                </div>
                <div class="content-container">
                  <div class="line"></div>
                  <div class="left-top-bar bar" style="height: 15px"></div>
                  <div class="right-top-bar bar" style="height: 15px"></div>
                  <div class="left-bottom-bar bar" style="height: 15px"></div>
                  <div class="right-bottom-bar bar" style="height: 15px"></div>
                  <div class="content">
                    <div class="flex" style="flex: 0;">
                      <div class="monitor-count-status">
                        <div class="monitor-count-status-desc">
                          <div class="title">定位焊刀具寿命</div>
                          <!-- 用 div 替代 el-progress -->
                          <div class="flex">
                            <div class="progress">
                              <div id="lowerPosWeldToolLife" class="progress-bar" role="progressbar" aria-valuenow="95"
                                aria-valuemin="0" aria-valuemax="100">
                              </div>
                            </div>
                            <div class="num"><span class="lowerPosWeldToolLife"></span>Y</div>
                          </div>
                        </div>
                      </div>
                      <div class="monitor-count-status">
                        <div class="monitor-count-status-desc">
                          <div class="title">正式焊刀具寿命</div>
                          <!-- 用 div 替代 el-progress -->
                          <div class="flex">
                            <div class="progress">
                              <div id="lowerFinalWeldToolLife" class="progress-bar" role="progressbar"
                                aria-valuenow="95" aria-valuemin="0" aria-valuemax="100">
                              </div>
                            </div>
                            <div class="num"><span class="lowerFinalWeldToolLife"></span>Y</div>
                          </div>
                        </div>
                      </div>
                    </div>
                    <div class="collapse-con">
                      <div class="icon">
                        <div>收起</div>
                        <img src="img/loading/collapse-icon.png" alt="">
                      </div>
                    </div>
                    <div class="position-container">
                      <div class="flex">
                        <div class="middle-content">
                          <div class="left-content">
                            <div class="bar-item">
                              <div class="left">
                                <div class="left-bar" style="background: #24eacd"></div>
                                <div class="title" style="color: #24eacd">
                                  定位焊接Z轴位置
                                </div>
                              </div>
                              <div style="color: #24eacd"><span class="lowerPosWeldZ"></span>m</div>
                            </div>
                            <div class="bar-item">
                              <div class="left">
                                <div class="left-bar" style="background: #fffa92"></div>
                                <div class="title" style="color: #fffa92">
                                  定位焊主轴转速
                                </div>
                              </div>
                              <div style="color: #fffa92"><span class="lowerPosWeldSpindleSpeed"></span>m/s</div>
                            </div>
                            <div class="bar-item">
                              <div class="left">
                                <div class="left-bar" style="background: #13e7ff"></div>
                                <div class="title" style="color: #13e7ff">
                                  定位焊主轴扭矩
                                </div>
                              </div>
                              <div style="color: #13e7ff"><span class="lowerPosWeldSpindleTorque"></span>m</div>
                            </div>
                          </div>
                        </div>
                        <div class="middle-content">
                          <div class="left-content">
                            <div class="bar-item">
                              <div class="left">
                                <div class="left-bar" style="background: #24eacd"></div>
                                <div class="title" style="color: #24eacd">
                                  正式焊接Z轴位置
                                </div>
                              </div>
                              <div style="color: #24eacd"><span class="lowerFinalWeldZ"></span>m</div>
                            </div>
                            <div class="bar-item">
                              <div class="left">
                                <div class="left-bar" style="background: #fffa92"></div>
                                <div class="title" style="color: #fffa92">
                                  正式焊主轴转速
                                </div>
                              </div>
                              <div style="color: #fffa92"><span class="lowerFinalWeldSpindleSpeed"></span>m</div>
                            </div>
                            <div class="bar-item">
                              <div class="left">
                                <div class="left-bar" style="background: #13e7ff"></div>
                                <div class="title" style="color: #13e7ff">
                                  正式焊主轴扭矩
                                </div>
                              </div>
                              <div style="color: #13e7ff"><span class="lowerFinalWeldSpindleTorque"></span>m</div>
                            </div>
                          </div>
                        </div>
                      </div>
                      <div class="bottom-content running-status">
                        <div class="flex row">
                          <div class="common-item">
                            <div class="title">焊接X轴位置</div>
                            <div class="status yellow "><span class="lowerWeldingX"></span>m</div>
                          </div>
                          <div class="common-item">
                            <div class="title">焊接进给速度</div>
                            <div class="status yellow "><span class="lowerWeldFeed"></span>m/s</div>
                          </div>
                          <div class="common-item">
                            <div class="title">恒压力Z轴调整值</div>
                            <div class="status yellow"><span class="lowerConstPressureZAdj"></span>m/s</div>
                          </div>
                          <div class="common-item">
                            <div class="title">焊接Y轴位置</div>
                            <div class="status yellow "><span class="lowerWeldingY"></span>m</div>
                          </div>
                          <div class="common-item">
                            <div class="title">焊接压力实时值</div>
                            <div class="status yellow"><span class="lowerWeldPressureReal"></span>w</div>
                          </div>
                          <div class="common-item">
                            <div class="title">焊接压力设定值</div>
                            <div class="status yellow"><span class="lowerWeldPressureSet"></span>w</div>
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                  <div class="line"></div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="flex right">
          <div class="flex">
            <div class="upper-milling">
              <div class="left">
                <div class="title-con">
                  <div>上机头铣削</div>
                </div>
                <div class="content-container">
                  <div class="line"></div>
                  <div class="left-top-bar bar" style="height: 11px"></div>
                  <div class="right-top-bar bar" style="height: 11px"></div>
                  <div class="left-bottom-bar bar" style="height: 11px"></div>
                  <div class="right-bottom-bar bar" style="height: 11px"></div>
                  <div class="content">
                    <div class="flex">
                      <div class="monitor-count-status">
                        <div class="monitor-count-status-desc">
                          <div class="title">铣削铣边刀具寿命</div>
                          <!-- 用 div 替代 el-progress -->
                          <div class="flex">
                            <div class="progress">
                              <div id="upperMillEdgeToolLife" class="progress-bar" role="progressbar" aria-valuenow="95"
                                aria-valuemin="0" aria-valuemax="100">
                              </div>
                            </div>
                            <div class="num"><span class="upperMillEdgeToolLife"></span>Y</div>
                          </div>
                        </div>
                      </div>
                      <div class="monitor-count-status">
                        <div class="monitor-count-status-desc">
                          <div class="title">铣削铣焊缝飞边刀具寿命</div>
                          <!-- 用 div 替代 el-progress -->
                          <div class="flex">
                            <div class="progress">
                              <div id="upperMillSeamToolLife" class="progress-bar" role="progressbar" aria-valuenow="95"
                                aria-valuemin="0" aria-valuemax="100">
                              </div>
                            </div>
                            <div class="num"><span class="upperMillSeamToolLife"></span>Y</div>
                          </div>
                        </div>
                      </div>
                    </div>
                    <div class="collapse-con upper-welding">
                      <div class="icon">
                        <div>收起</div>
                        <img src="img/loading/collapse-icon.png" alt="">
                      </div>
                    </div>
                    <div class="position-container">
                      <div class="flex">
                        <div class="middle-content">
                          <div class="left-content">
                            <div class="bar-item">
                              <div class="left">
                                <div class="left-bar" style="background: #24eacd"></div>
                                <div class="title" style="color: #24eacd">
                                  铣削Y轴位置
                                </div>
                              </div>
                              <div style="color: #24eacd"><span class="upperMillY"></span>m</div>
                            </div>
                            <div class="bar-item">
                              <div class="left">
                                <div class="left-bar" style="background: #fffa92"></div>
                                <div class="title" style="color: #fffa92">
                                  铣削Z轴位置
                                </div>
                              </div>
                              <div style="color: #fffa92"><span class="upperMillZ"></span>m</div>
                            </div>
                            <div class="bar-item">
                              <div class="left">
                                <div class="left-bar" style="background: #13e7ff"></div>
                                <div class="title" style="color: #13e7ff">
                                  铣削进给速度
                                </div>
                              </div>
                              <div style="color: #13e7ff"><span class="upperMillFeed"></span>m/s</div>
                            </div>
                          </div>
                        </div>
                        <div class="middle-content right-content">
                          <div class="left-content">
                            <div class="rotate-speed">
                              <span class="upperMillSpindleSpeed"></span><sub>r/s</sub>
                            </div>
                            <div class="common-item milling">
                              <div class="title">铣削主轴转速</div>
                            </div>
                          </div>
                          <div class="left-content">
                            <div class="rotate-speed">
                              <span class="upperMillSpindleTorque"></span><sub>r/s</sub>
                            </div>
                            <div class="common-item milling">
                              <div class="title">铣削主轴扭矩</div>
                            </div>
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                  <div class="line"></div>
                </div>
              </div>
            </div>

            <div class="down-milling">
              <div class="left">
                <div class="title-con">
                  <div>下机头铣削</div>
                </div>
                <div class="content-container">
                  <div class="line"></div>
                  <div class="left-top-bar bar" style="height: 11px"></div>
                  <div class="right-top-bar bar" style="height: 11px"></div>
                  <div class="left-bottom-bar bar" style="height: 11px"></div>
                  <div class="right-bottom-bar bar" style="height: 11px"></div>
                  <div class="content">
                    <div class="flex">
                      <div class="monitor-count-status">
                        <div class="monitor-count-status-desc">
                          <div class="title">铣削铣边刀具寿命</div>
                          <!-- 用 div 替代 el-progress -->
                          <div class="flex">
                            <div class="progress">
                              <div id="lowerMillEdgeToolLife" class="progress-bar" role="progressbar" aria-valuenow="95"
                                aria-valuemin="0" aria-valuemax="100">
                              </div>
                            </div>
                            <div class="num"><span class="lowerMillEdgeToolLife"></span>Y</div>
                          </div>
                        </div>
                      </div>
                      <div class="monitor-count-status">
                        <div class="monitor-count-status-desc">
                          <div class="title">铣削铣焊缝飞边刀具寿命</div>
                          <!-- 用 div 替代 el-progress -->
                          <div class="flex">
                            <div class="progress">
                              <div id="lowerMillSeamToolLife" class="progress-bar" role="progressbar" aria-valuenow="95"
                                aria-valuemin="0" aria-valuemax="100">
                              </div>
                            </div>
                            <div class="num"><span class="lowerMillSeamToolLife"></span>Y</div>
                          </div>
                        </div>
                      </div>
                    </div>
                    <div class="collapse-con lower-welding">
                      <div class="icon">
                        <div>收起</div>
                        <img src="img/loading/collapse-icon.png" alt="">
                      </div>
                    </div>
                    <div class="position-container">
                      <div class="flex">
                        <div class="middle-content">
                          <div class="left-content">
                            <div class="bar-item">
                              <div class="left">
                                <div class="left-bar" style="background: #00B5FF"></div>
                                <div class="title" style="color: #00B5FF">
                                  铣削X轴位置
                                </div>
                              </div>
                              <div style="color: #00B5FF"><span class="lowerMillX"></span>m</div>
                            </div>
                            <div class="bar-item">
                              <div class="left">
                                <div class="left-bar" style="background: #24eacd"></div>
                                <div class="title" style="color: #24eacd">
                                  铣削Y轴位置
                                </div>
                              </div>
                              <div style="color: #24eacd"><span class="lowerMillY"></span>m</div>
                            </div>
                            <div class="bar-item">
                              <div class="left">
                                <div class="left-bar" style="background: #fffa92"></div>
                                <div class="title" style="color: #fffa92">
                                  铣削Z轴位置
                                </div>
                              </div>
                              <div style="color: #fffa92"><span class="lowerMillZ"></span>m</div>
                            </div>
                            <div class="bar-item">
                              <div class="left">
                                <div class="left-bar" style="background: #13e7ff"></div>
                                <div class="title" style="color: #13e7ff">
                                  铣削进给速度
                                </div>
                              </div>
                              <div style="color: #13e7ff"><span class="lowerMillFeed"></span>m/s</div>
                            </div>
                          </div>
                        </div>
                        <div class="middle-content  right-content">
                          <div class="left-content">
                            <div class="rotate-speed">
                              <span class="lowerMillSpindleSpeed"></span><sub>r/s</sub>
                            </div>
                            <div class="common-item milling">
                              <div class="title">铣削主轴转速</div>
                            </div>
                          </div>
                          <div class="left-content">
                            <div class="rotate-speed">
                              <span class="lowerMillSpindleSpeed"></span><sub>r/s</sub>
                            </div>
                            <div class="common-item milling">
                              <div class="title">铣削主轴扭矩</div>
                            </div>
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                  <div class="line"></div>
                </div>
              </div>
            </div>
          </div>
          <div class="machine">
            <div class="title-con" style="width: 480px;">
              <div>FSW 设备</div>
            </div>
            <div class="content-container">
              <div class="line"></div>
              <div class="left-top-bar bar" style="height: 5px"></div>
              <div class="right-top-bar bar" style="height: 5px"></div>
              <div class="left-bottom-bar bar" style="height: 5px"></div>
              <div class="right-bottom-bar bar" style="height: 5px"></div>
              <div class="content" style="position: relative;">
                <div class="flex">
                  <div class="flex" style="flex-direction: column;max-width: max-content;">
                    <div class="flex" style="max-width: max-content;">
                      <div class="common-item">
                        <div class="title">水冷机1状态</div>
                        <span class="status waterCool1Status"></span>
                      </div>
                      <div class="common-item">
                        <div class="title">水冷机2状态</div>
                        <span class="status waterCool2Status"></span>
                      </div>
                      <div class="common-item">
                        <div class="title">水冷机3状态</div>
                        <span class="status waterCool2Status"></span>
                      </div>
                      <div class="common-item">
                        <div class="title">FSW焊接板料计数</div>
                        <div class="status"><span class="fswPlateCount"></span> 个</div>
                      </div>
                    </div>
                    <div class="common-item" style="flex-direction: row;padding:20px 0 0;">
                      <div class="title">激光跟踪偏移值</div>
                      <div class="status" style="font-size: 20px;margin-left: 60px;"><span
                          class="laserTrackingOffset"></span>m
                      </div>
                    </div>
                  </div>
                  <div class="station">
                    <img src="img/loading/hydraulic-station.png" alt="" srcset="">
                    <div class="temperature">
                      <div class="desc">
                        <div class="title">
                          温度
                        </div>
                        <div class="num">
                          <span class="hydraulicTemp"></span>℃
                        </div>
                      </div>
                    </div>
                    <div class="liquid-level">
                      <div class="desc">
                        <div class="title">
                          液位
                        </div>
                        <div class="num">
                          <span class="hydraulicLevel"></span>℃
                        </div>
                      </div>
                    </div>
                    <div class="ywzyw-warning warning-box">
                      <div class="warning-content">
                        <div class="warning-title">液压站液位异常报警</div>
                      </div>
                      <div class="warning-mark">
                        <img src="img/loading/alert.png" alt="" srcset="">
                      </div>
                    </div>
                    <div class="ywzwd-warning warning-box">
                      <div class="warning-content">
                        <div class="warning-title">液压站温度异常报警</div>
                      </div>
                      <div class="warning-mark">
                        <img src="img/loading/alert.png" alt="" srcset="">
                      </div>
                    </div>
                  </div>
                </div>
              </div>
              <div class="line"></div>
            </div>
          </div>
        </div>

      </div>
      <div class="flex bottom">
        <div class="left">
          <div class="title-con run-status">
            <div>物流线运行状态</div>
          </div>
          <div class="running-status">
            <div class="flex row weld-materialFlow" id="materialFlows">
            </div>
            <!-- <div class="flex row" id="transducer">
                            </div> -->
          </div>
        </div>
        <div class="right">
          <div class="title-con run-status">
            <div>物流线运行状态</div>
          </div>
          <div class="running-status">
            <div class="flex row mill-materialFlow" id="materialFlows1">
            </div>
            <div class="flex row mill-transducer" id="transducer">
            </div>
          </div>
        </div>
      </div>
    </div>

  </div>
  </div>
</body>

</html>
<script>
  var refleshAlarm = 1500;
  var refleshStatus = 1500;
  var warningStr = '';
  $('#friction-welding .upper-welding .collapse-con').click(function (e) {
    let display = $('#friction-welding .upper-welding .position-container')[0].style.display
    $('#friction-welding .upper-welding .position-container').css('display', display === 'none' ? 'block' : 'none')
    $('#friction-welding .upper-welding  .collapse-con div div').html(display !== 'none' ? '展开' : '收起')
    $('#friction-welding .upper-welding  .collapse-con img').css('transform', `rotate(${display === 'none' ? 0 : 180}deg)`)
  });
  $('#friction-welding .down-welding .collapse-con').click(function (e) {
    let display = $('#friction-welding .down-welding .position-container')[0].style.display
    $('#friction-welding .down-welding .position-container').css('display', display === 'none' ? 'block' : 'none')
    $('#friction-welding .down-welding  .collapse-con  div div').html(display !== 'none' ? '展开' : '收起')
    $('#friction-welding .down-welding  .collapse-con img').css('transform', `rotate(${display === 'none' ? 0 : 180}deg)`)
  });
  $('#friction-welding .upper-milling .collapse-con').click(function (e) {
    let display = $('#friction-welding .upper-milling .position-container')[0].style.display
    $('#friction-welding .upper-milling .position-container').css('display', display === 'none' ? 'block' : 'none')
    $('#friction-welding .upper-milling  .collapse-con  div div').html(display !== 'none' ? '展开' : '收起')
    $('#friction-welding .upper-milling  .collapse-con img').css('transform', `rotate(${display === 'none' ? 0 : 180}deg)`)
  });
  $('#friction-welding .down-milling .collapse-con').click(function (e) {
    let display = $('#friction-welding .down-milling .position-container')[0].style.display
    $('#friction-welding .down-milling .position-container').css('display', display === 'none' ? 'block' : 'none')
    $('#friction-welding .down-milling  .collapse-con span').html(display !== 'none' ? '展开' : '收起')
    $('#friction-welding .down-milling  .collapse-con img').css('transform', `rotate(${display === 'none' ? 0 : 180}deg)`)
  });
  $('#friction-welding #tip').click(function (e) {
    e.stopPropagation(); //阻止事件冒泡
    $('#friction-welding #tip-wrapper-list').css('display', 'block');
  });
  $('#friction-welding #friction-welding').click(function (e) {
    if (e.target.classList.contains('tip-wrapper-list-item') || e.target.classList.contains('alarms') || e.target.classList.contains('tip-wrapper-list-content') || e.target.classList.contains('tip-header') || e.target.classList.contains('tip') || e.target.classList.contains('tip-wrapper-list')) return
    $('#friction-welding #tip-wrapper-list').css('display', 'none');
  });
  async function getWeldingStatusInfo() {
    const data = await new Promise((resolve, reject) => {
      let resStr =
        '{"updateTime":1742808488520,"weldingStatus":{"upperWeldingX":153.96,"upperWeldingY":153.96,"upperPosWeldZ":153.96,"upperFinalWeldZ":153.96,"upperMillY":153.96,"upperMillZ":153.96,"upperWeldFeed":153.96,"upperMillFeed":153.96,"upperPosWeldSpindleSpeed":153.96,"upperPosWeldSpindleTorque":153.96,"upperFinalWeldSpindleSpeed":153.96,"upperFinalWeldSpindleTorque":153.96,"upperMillSpindleSpeed":96,"upperMillSpindleTorque":96,"upperWeldPressureReal":153.96,"upperWeldPressureSet":153.96,"upperConstPressureZAdj":153.96,"upperPosWeldToolLife":76,"upperFinalWeldToolLife":76,"upperMillEdgeToolLife":76,"upperMillSeamToolLife":76,"lowerWeldingX":153.96,"lowerWeldingY":153.96,"lowerPosWeldZ":153.96,"lowerFinalWeldZ":153.96,"lowerMillX":153.96,"lowerMillY":153.96,"lowerMillZ":153.96,"lowerWeldFeed":153.96,"lowerMillFeed":153.96,"lowerPosWeldSpindleSpeed":153.96,"lowerPosWeldSpindleTorque":96,"lowerFinalWeldSpindleSpeed":96,"lowerFinalWeldSpindleTorque":96,"lowerMillSpindleSpeed":96,"lowerMillSpindleTorque":153.96,"lowerWeldPressureReal":153.96,"lowerWeldPressureSet":153.96,"lowerConstPressureZAdj":153.96,"lowerPosWeldToolLife":76,"lowerFinalWeldToolLife":76,"lowerMillEdgeToolLife":76,"lowerMillSeamToolLife":76,"laserTrackingOffset":153.96,"waterCool1Status":76,"waterCool2Status":76,"waterCool3Status":76,"hydraulicTemp":153.96,"hydraulicLevel":153.96,"fswPlateCount":76}}'
      res = JSON.parse(resStr);
      resolve(res)
      console.log(res, 'res');
      $('#friction-welding .waterCool1Status').text(res.weldingStatus.waterCool1Status === 0 ? '正常' : res.weldingStatus.waterCool1Status === 1 ? '异常' : '');
      $('#friction-welding .waterCool2Status').text(res.weldingStatus.waterCool2Status === 0 ? '正常' : res.weldingStatus.waterCool2Status === 1 ? '异常' : '');
      $('#friction-welding .waterCool3Status').text(res.weldingStatus.waterCool3Status === 0 ? '正常' : res.weldingStatus.waterCool3Status === 1 ? '异常' : '');
      $('#friction-welding .fswPlateCount').text(res.weldingStatus.fswPlateCount);
      $('#friction-welding .laserTrackingOffset').text(res.weldingStatus.laserTrackingOffset);
      $('#friction-welding .hydraulicTemp').text(res.weldingStatus.hydraulicTemp);
      $('#friction-welding .hydraulicLevel').text(res.weldingStatus.hydraulicLevel);
      $('#friction-welding .upperWeldingX').text(res.weldingStatus.upperWeldingX);
      $('#friction-welding .upperWeldingY').text(res.weldingStatus.upperWeldingY);
      $('#friction-welding .upperWeldFeed').text(res.weldingStatus.upperWeldFeed);
      $('#friction-welding .upperWeldPressureReal').text(res.weldingStatus.upperWeldPressureReal);
      $('#friction-welding .upperWeldPressureSet').text(res.weldingStatus.upperWeldPressureSet);
      $('#friction-welding .upperConstPressureZAdj').text(res.weldingStatus.upperConstPressureZAdj);
      $('#friction-welding .upperPosWeldZ').text(res.weldingStatus.upperPosWeldZ);
      $('#friction-welding .upperPosWeldSpindleSpeed').text(res.weldingStatus.upperPosWeldSpindleSpeed);
      $('#friction-welding .upperPosWeldSpindleTorque').text(res.weldingStatus.upperPosWeldSpindleTorque);
      $('#friction-welding .upperFinalWeldZ').text(res.weldingStatus.upperFinalWeldZ);
      $('#friction-welding .upperFinalWeldSpindleSpeed').text(res.weldingStatus.upperFinalWeldSpindleSpeed);
      $('#friction-welding .upperFinalWeldSpindleTorque').text(res.weldingStatus.upperFinalWeldSpindleTorque);
      $('#friction-welding .upperMillY').text(res.weldingStatus.upperMillY);
      $('#friction-welding .upperMillZ').text(res.weldingStatus.upperMillZ);
      $('#friction-welding .upperMillFeed').text(res.weldingStatus.upperMillFeed);
      $('#friction-welding .upperMillSpindleSpeed').text(res.weldingStatus.upperMillSpindleSpeed);
      $('#friction-welding .upperMillSpindleTorque').text(res.weldingStatus.upperMillSpindleTorque);
      $('#friction-welding .upperPosWeldToolLife').text(res.weldingStatus.upperPosWeldToolLife);
      $('#friction-welding .upperFinalWeldToolLife').text(res.weldingStatus.upperFinalWeldToolLife);
      $('#friction-welding .upperMillEdgeToolLife').text(res.weldingStatus.upperMillEdgeToolLife);
      $('#friction-welding .upperMillSeamToolLife').text(res.weldingStatus.upperMillSeamToolLife);
      updateProgress('#upperPosWeldToolLife', res.weldingStatus.upperPosWeldToolLife)
      updateProgress('#upperFinalWeldToolLife', res.weldingStatus.upperFinalWeldToolLife)
      updateProgress('#upperMillEdgeToolLife', res.weldingStatus.upperMillEdgeToolLife)
      updateProgress('#upperMillSeamToolLife', res.weldingStatus.upperMillSeamToolLife)
      $('#friction-welding .lowerWeldingX').text(res.weldingStatus.lowerWeldingX);
      $('#friction-welding .lowerWeldingY').text(res.weldingStatus.lowerWeldingY);
      $('#friction-welding .lowerWeldFeed').text(res.weldingStatus.lowerWeldFeed);
      $('#friction-welding .lowerWeldPressureReal').text(res.weldingStatus.lowerWeldPressureReal);
      $('#friction-welding .lowerWeldPressureSet').text(res.weldingStatus.lowerWeldPressureSet);
      $('#friction-welding .lowerConstPressureZAdj').text(res.weldingStatus.lowerConstPressureZAdj);
      $('#friction-welding .lowerPosWeldZ').text(res.weldingStatus.lowerPosWeldZ);
      $('#friction-welding .lowerPosWeldSpindleSpeed').text(res.weldingStatus.lowerPosWeldSpindleSpeed);
      $('#friction-welding .lowerPosWeldSpindleTorque').text(res.weldingStatus.lowerPosWeldSpindleTorque);
      $('#friction-welding .lowerFinalWeldZ').text(res.weldingStatus.lowerFinalWeldZ);
      $('#friction-welding .lowerFinalWeldSpindleSpeed').text(res.weldingStatus.lowerFinalWeldSpindleSpeed);
      $('#friction-welding .lowerFinalWeldSpindleTorque').text(res.weldingStatus.lowerFinalWeldSpindleTorque);
      $('#friction-welding .lowerMillX').text(res.weldingStatus.lowerMillX);
      $('#friction-welding .lowerMillY').text(res.weldingStatus.lowerMillY);
      $('#friction-welding .lowerMillZ').text(res.weldingStatus.lowerMillZ);
      $('#friction-welding .lowerMillFeed').text(res.weldingStatus.lowerMillFeed);
      $('#friction-welding .lowerMillSpindleSpeed').text(res.weldingStatus.lowerMillSpindleSpeed);
      $('#friction-welding .lowerMillSpindleTorque').text(res.weldingStatus.lowerMillSpindleTorque);
      $('#friction-welding .lowerPosWeldToolLife').text(res.weldingStatus.lowerPosWeldToolLife);
      $('#friction-welding .lowerFinalWeldToolLife').text(res.weldingStatus.lowerFinalWeldToolLife);
      $('#friction-welding #lowerPosWeldToolLife').css('aria-valuenow', res.weldingStatus.lowerPosWeldToolLife)
      $('#friction-welding .lowerMillEdgeToolLife').text(res.weldingStatus.lowerMillEdgeToolLife);
      $('#friction-welding .lowerMillSeamToolLife').text(res.weldingStatus.lowerMillSeamToolLife);
      updateProgress('#lowerPosWeldToolLife', res.weldingStatus.lowerPosWeldToolLife)
      updateProgress('#lowerFinalWeldToolLife', res.weldingStatus.lowerFinalWeldToolLife)
      updateProgress('#lowerMillEdgeToolLife', res.weldingStatus.lowerMillEdgeToolLife)
      updateProgress('#lowerMillSeamToolLife', res.weldingStatus.lowerMillSeamToolLife)
      $('#friction-welding .laserStatus').text(res.weldingStatus.laserStatus === 0 ? '正常' : res.weldingStatus.laserStatus === 1 ?
        '异常' : '');
      $('#friction-welding .laserCoolerTemperature').text(res.weldingStatus.laserCoolerTemperature === 0 ? '正常' : res
        .weldingStatus.laserCoolerTemperature === 1 ? '异常' : '');
      $('#friction-welding .inkjetMarkingStatus').text(res.weldingStatus.inkjetMarkingStatus === 0 ? '正常' : res.weldingStatus
        .inkjetMarkingStatus === 1 ? '异常' : '');
      $('#friction-welding .laserSmokeExtractorStatus').text(res.weldingStatus.laserSmokeExtractorStatus === 0 ? '正常' : res
        .weldingStatus.laserSmokeExtractorStatus === 1 ? '异常' : '');
      $('#friction-welding .boardVisionRecognitionStatus').text(res.weldingStatus.boardVisionRecognitionStatus === 0 ? '正常' : res
        .weldingStatus.boardVisionRecognitionStatus === 1 ? '异常' : '');
      $('#friction-welding .boardVisionCorrection').text(res.weldingStatus.boardVisionCorrection === 0 ? '正常' : res.weldingStatus
        .boardVisionCorrection === 1 ? '异常' : '');
      $('#friction-welding .wetDustCollectorStatus').text(res.weldingStatus.wetDustCollectorStatus === 0 ? '正常' : res
        .weldingStatus.wetDustCollectorStatus === 1 ? '异常' : '');
      $('#friction-welding .laserWeldingCount').text(res.weldingStatus.laserWeldingCount);
      $('#friction-welding .grindingDiscCurrentLifetime').text(res.weldingStatus.grindingDiscCurrentLifetime);
      $('#friction-welding .grindingDiscSetLifetime').text(res.weldingStatus.grindingDiscSetLifetime);
      $('#friction-welding .grindingHeadY').text(res.weldingStatus.grindingHeadY);
      $('#friction-welding .grindingHeadZ').text(res.weldingStatus.grindingHeadZ);
      $('#friction-welding .grindingHeadC').text(res.weldingStatus.grindingHeadC);
      $('#friction-welding .grindingSpindleSpeed').text(res.weldingStatus.grindingSpindleSpeed);
      $('#friction-welding .grindingDiscNewCount').text(res.weldingStatus.grindingDiscNewCount);
      $('#friction-welding .grindingDiscOldCount').text(res.weldingStatus.grindingDiscOldCount);
      $('#friction-welding #currentDateTime').text(formatDateTime(res.updateTime));


    })
    return data
  }
  function findArrRecord(arr = [], key, value) {
    return arr.find(item => item[key] === value)
  }
  async function getWeldingAlarmInfo() {
    const data = await new Promise((resolve, reject) => {
      //字符串转json
      resStr =
        '{"weldingAlarms":[{"component":0,"alarmType":0,"deviceSn":1},{"component":0,"alarmType":1,"deviceSn":1},{"component":0,"alarmType":2,"deviceSn":1},{"component":0,"alarmType":2,"deviceSn":2},{"component":0,"alarmType":2,"deviceSn":3},{"component":0,"alarmType":2,"deviceSn":4},{"component":0,"alarmType":2,"deviceSn":5},{"component":0,"alarmType":2,"deviceSn":6},{"component":0,"alarmType":2,"deviceSn":7},{"component":0,"alarmType":2,"deviceSn":8},{"component":0,"alarmType":2,"deviceSn":9},{"component":0,"alarmType":2,"deviceSn":10},{"component":0,"alarmType":2,"deviceSn":11},{"component":0,"alarmType":2,"deviceSn":12},{"component":0,"alarmType":2,"deviceSn":13},{"component":0,"alarmType":2,"deviceSn":14},{"component":0,"alarmType":2,"deviceSn":15},{"component":0,"alarmType":2,"deviceSn":16},{"component":0,"alarmType":2,"deviceSn":17},{"component":0,"alarmType":2,"deviceSn":18},{"component":0,"alarmType":2,"deviceSn":19},{"component":0,"alarmType":2,"deviceSn":20},{"component":0,"alarmType":2,"deviceSn":21},{"component":0,"alarmType":2,"deviceSn":22},{"component":0,"alarmType":2,"deviceSn":23},{"component":0,"alarmType":2,"deviceSn":24},{"component":0,"alarmType":2,"deviceSn":25},{"component":0,"alarmType":2,"deviceSn":26},{"component":0,"alarmType":2,"deviceSn":27},{"component":0,"alarmType":2,"deviceSn":28},{"component":0,"alarmType":2,"deviceSn":29},{"component":0,"alarmType":2,"deviceSn":30},{"component":0,"alarmType":3,"deviceSn":1},{"component":0,"alarmType":3,"deviceSn":2},{"component":0,"alarmType":3,"deviceSn":3},{"component":0,"alarmType":3,"deviceSn":4},{"component":0,"alarmType":3,"deviceSn":5},{"component":0,"alarmType":3,"deviceSn":6},{"component":0,"alarmType":3,"deviceSn":7},{"component":0,"alarmType":3,"deviceSn":8},{"component":0,"alarmType":3,"deviceSn":9},{"component":0,"alarmType":3,"deviceSn":10},{"component":0,"alarmType":3,"deviceSn":11},{"component":0,"alarmType":3,"deviceSn":12},{"component":0,"alarmType":3,"deviceSn":13},{"component":0,"alarmType":3,"deviceSn":14},{"component":0,"alarmType":3,"deviceSn":15},{"component":0,"alarmType":3,"deviceSn":16},{"component":0,"alarmType":3,"deviceSn":17},{"component":0,"alarmType":3,"deviceSn":18},{"component":0,"alarmType":3,"deviceSn":19},{"component":0,"alarmType":3,"deviceSn":20},{"component":0,"alarmType":3,"deviceSn":21},{"component":0,"alarmType":3,"deviceSn":22},{"component":0,"alarmType":3,"deviceSn":23},{"component":0,"alarmType":3,"deviceSn":24},{"component":0,"alarmType":3,"deviceSn":25},{"component":0,"alarmType":3,"deviceSn":26},{"component":0,"alarmType":3,"deviceSn":27},{"component":0,"alarmType":3,"deviceSn":28},{"component":0,"alarmType":3,"deviceSn":29},{"component":0,"alarmType":3,"deviceSn":30},{"component":0,"alarmType":3,"deviceSn":31},{"component":0,"alarmType":3,"deviceSn":32},{"component":0,"alarmType":3,"deviceSn":33},{"component":0,"alarmType":3,"deviceSn":34},{"component":0,"alarmType":3,"deviceSn":35},{"component":0,"alarmType":3,"deviceSn":36},{"component":0,"alarmType":3,"deviceSn":37},{"component":0,"alarmType":3,"deviceSn":38},{"component":0,"alarmType":3,"deviceSn":39},{"component":0,"alarmType":3,"deviceSn":40},{"component":0,"alarmType":3,"deviceSn":41},{"component":0,"alarmType":3,"deviceSn":42},{"component":0,"alarmType":3,"deviceSn":43},{"component":0,"alarmType":3,"deviceSn":44},{"component":0,"alarmType":3,"deviceSn":45},{"component":0,"alarmType":3,"deviceSn":46},{"component":0,"alarmType":3,"deviceSn":47},{"component":0,"alarmType":3,"deviceSn":48},{"component":0,"alarmType":3,"deviceSn":49},{"component":0,"alarmType":3,"deviceSn":50},{"component":0,"alarmType":3,"deviceSn":51},{"component":0,"alarmType":3,"deviceSn":52},{"component":0,"alarmType":3,"deviceSn":53},{"component":0,"alarmType":3,"deviceSn":54},{"component":0,"alarmType":3,"deviceSn":55},{"component":0,"alarmType":3,"deviceSn":56},{"component":0,"alarmType":3,"deviceSn":57},{"component":0,"alarmType":3,"deviceSn":58},{"component":0,"alarmType":3,"deviceSn":59},{"component":0,"alarmType":3,"deviceSn":60},{"component":0,"alarmType":4,"deviceSn":1},{"component":0,"alarmType":4,"deviceSn":2},{"component":0,"alarmType":4,"deviceSn":3},{"component":0,"alarmType":4,"deviceSn":4},{"component":0,"alarmType":4,"deviceSn":5},{"component":0,"alarmType":4,"deviceSn":6},{"component":0,"alarmType":4,"deviceSn":7},{"component":0,"alarmType":4,"deviceSn":8},{"component":0,"alarmType":4,"deviceSn":9},{"component":0,"alarmType":4,"deviceSn":10},{"component":0,"alarmType":4,"deviceSn":11},{"component":0,"alarmType":4,"deviceSn":12},{"component":0,"alarmType":4,"deviceSn":13},{"component":0,"alarmType":4,"deviceSn":14},{"component":0,"alarmType":4,"deviceSn":15},{"component":0,"alarmType":4,"deviceSn":16},{"component":0,"alarmType":4,"deviceSn":17},{"component":0,"alarmType":4,"deviceSn":18},{"component":0,"alarmType":4,"deviceSn":19},{"component":0,"alarmType":4,"deviceSn":20},{"component":0,"alarmType":4,"deviceSn":21},{"component":0,"alarmType":4,"deviceSn":22},{"component":0,"alarmType":4,"deviceSn":23},{"component":0,"alarmType":4,"deviceSn":24},{"component":0,"alarmType":4,"deviceSn":25},{"component":0,"alarmType":4,"deviceSn":26},{"component":0,"alarmType":4,"deviceSn":27},{"component":0,"alarmType":4,"deviceSn":28},{"component":0,"alarmType":5,"deviceSn":1},{"component":0,"alarmType":5,"deviceSn":2},{"component":0,"alarmType":5,"deviceSn":3},{"component":0,"alarmType":5,"deviceSn":4},{"component":0,"alarmType":5,"deviceSn":5},{"component":0,"alarmType":5,"deviceSn":6},{"component":0,"alarmType":5,"deviceSn":7},{"component":0,"alarmType":5,"deviceSn":8},{"component":0,"alarmType":6,"deviceSn":1},{"component":0,"alarmType":6,"deviceSn":2},{"component":0,"alarmType":7,"deviceSn":1},{"component":0,"alarmType":7,"deviceSn":2},{"component":0,"alarmType":8,"deviceSn":1},{"component":0,"alarmType":8,"deviceSn":2},{"component":0,"alarmType":8,"deviceSn":3},{"component":0,"alarmType":8,"deviceSn":4},{"component":0,"alarmType":8,"deviceSn":5},{"component":0,"alarmType":8,"deviceSn":6},{"component":0,"alarmType":8,"deviceSn":7},{"component":0,"alarmType":8,"deviceSn":8},{"component":0,"alarmType":8,"deviceSn":9},{"component":0,"alarmType":8,"deviceSn":10},{"component":0,"alarmType":8,"deviceSn":11},{"component":0,"alarmType":8,"deviceSn":12},{"component":0,"alarmType":8,"deviceSn":13},{"component":0,"alarmType":8,"deviceSn":14},{"component":0,"alarmType":8,"deviceSn":15},{"component":0,"alarmType":8,"deviceSn":16},{"component":0,"alarmType":8,"deviceSn":17},{"component":0,"alarmType":8,"deviceSn":18},{"component":0,"alarmType":8,"deviceSn":19},{"component":0,"alarmType":8,"deviceSn":20},{"component":0,"alarmType":8,"deviceSn":21},{"component":0,"alarmType":9,"deviceSn":1},{"component":0,"alarmType":10,"deviceSn":1},{"component":0,"alarmType":10,"deviceSn":1}],"updateTime":1742808518337}'
      res = JSON.parse(resStr);
      let { weldingAlarms, updateTime } = res
      resolve(res)
      let zzslAlarm = findArrRecord(weldingAlarms, 'alarmType', 0)
      if (zzslAlarm && zzslAlarm.deviceSn > 0) {
        $('#friction-welding .zzsl-warning').css('display', 'block')
      }
      let djslAlarm = findArrRecord(weldingAlarms, 'alarmType', 1)
      if (djslAlarm && djslAlarm.deviceSn > 0) {
        $('#friction-welding .djsl-warning').css('display', 'block')
      }
      let ybAlarm = findArrRecord(weldingAlarms, 'alarmType', 2)
      if (ybAlarm && ybAlarm.deviceSn > 0) {
        $('#friction-welding .yb-warning').css('display', 'block')
        $('#friction-welding .yb-warning span').text(ybAlarm.deviceSn)
      }
      let sjdbAlarm = findArrRecord(weldingAlarms, 'alarmType', 3)
      if (sjdbAlarm && sjdbAlarm.deviceSn > 0) {
        $('#friction-welding .sjdb-warning').css('display', 'block')
        $('#friction-welding .sjdb-warning span').text(sjdbAlarm.deviceSn)
      }
      let xcAlarm = findArrRecord(weldingAlarms, 'alarmType', 4)
      if (xcAlarm && xcAlarm.deviceSn > 0) {
        $('#friction-welding .xc-warning').css('display', 'block')
        $('#friction-welding .xc-warning span').text(xcAlarm.deviceSn)
      }
      let cxdwAlarm = findArrRecord(weldingAlarms, 'alarmType', 5)
      if (cxdwAlarm && cxdwAlarm.deviceSn > 0) {
        $('#friction-welding .cxdw-warning').css('display', 'block')
        $('#friction-welding .cxdw-warning span').text(cxdwAlarm.deviceSn)
      }
      let ctAlarm = findArrRecord(weldingAlarms, 'alarmType', 6)
      if (ctAlarm && ctAlarm.deviceSn > 0) {
        $('#friction-welding .ct-warning').css('display', 'block')
        $('#friction-welding .ct-warning span').text(ctAlarm.deviceSn)
      }
      let hdAlarm = findArrRecord(weldingAlarms, 'alarmType', 7)
      if (hdAlarm && hdAlarm.deviceSn > 0) {
        $('#friction-welding .hd-warning').css('display', 'block')
        $('#friction-welding .hd-warning span').text(hdAlarm.deviceSn)
      }
      let zjzAlarm = findArrRecord(weldingAlarms, 'alarmType', 8)
      if (zjzAlarm && zjzAlarm.deviceSn > 0) {
        $('#friction-welding .zjz-warning').css('display', 'block')
        $('#friction-welding .zjz-warning span').text(zjzAlarm.deviceSn)
      }
      let ywzwdAlarm = findArrRecord(weldingAlarms, 'alarmType', 9)
      if (ywzwdAlarm && ywzwdAlarm.deviceSn > 0) {
        $('#friction-welding .ywzwd-warning').css('display', 'block')
      }
      let ywzywAlarm = findArrRecord(weldingAlarms, 'alarmType', 10)
      if (ywzywAlarm && ywzywAlarm.deviceSn > 0) {
        $('#friction-welding .ywzyw-warning').css('display', 'block')
      }
      let skxtAlarm = findArrRecord(weldingAlarms, 'alarmType', 11)
      if (skxtAlarm && skxtAlarm.deviceSn > 0) {
        $('#friction-welding .skxt-warning').css('display', 'block')
      }
    })
    return data
  }
  async function getTransportAlarmsInfo() {
    $('#friction-welding .sfdj-warning').css('display', 'none')
    $('#friction-welding .bpq-warning').css('display', 'none')
    const data = await new Promise((resolve, reject) => {
      //字符串转json
      resStr =
        '{"updateTime":1742810523559,"transportAlarms":[{"component":10,"alarmType":0,"deviceSn":1},{"component":10,"alarmType":0,"deviceSn":2},{"component":10,"alarmType":0,"deviceSn":3},{"component":10,"alarmType":0,"deviceSn":4},{"component":10,"alarmType":0,"deviceSn":5},{"component":10,"alarmType":0,"deviceSn":6},{"component":10,"alarmType":0,"deviceSn":7},{"component":10,"alarmType":0,"deviceSn":8},{"component":10,"alarmType":0,"deviceSn":9},{"component":10,"alarmType":0,"deviceSn":10},{"component":10,"alarmType":0,"deviceSn":11},{"component":10,"alarmType":0,"deviceSn":12},{"component":10,"alarmType":0,"deviceSn":13},{"component":10,"alarmType":0,"deviceSn":14},{"component":10,"alarmType":1,"deviceSn":1},{"component":10,"alarmType":1,"deviceSn":2},{"component":10,"alarmType":1,"deviceSn":3},{"component":10,"alarmType":1,"deviceSn":4},{"component":10,"alarmType":1,"deviceSn":5},{"component":10,"alarmType":1,"deviceSn":6},{"component":20,"alarmType":0,"deviceSn":1},{"component":20,"alarmType":0,"deviceSn":2},{"component":20,"alarmType":0,"deviceSn":3},{"component":20,"alarmType":0,"deviceSn":4},{"component":20,"alarmType":0,"deviceSn":5},{"component":20,"alarmType":0,"deviceSn":6},{"component":20,"alarmType":0,"deviceSn":7},{"component":20,"alarmType":0,"deviceSn":8},{"component":20,"alarmType":0,"deviceSn":9},{"component":20,"alarmType":0,"deviceSn":10},{"component":20,"alarmType":0,"deviceSn":11},{"component":20,"alarmType":0,"deviceSn":12},{"component":20,"alarmType":0,"deviceSn":13},{"component":20,"alarmType":0,"deviceSn":14},{"component":20,"alarmType":0,"deviceSn":15},{"component":20,"alarmType":0,"deviceSn":16},{"component":20,"alarmType":0,"deviceSn":17},{"component":20,"alarmType":0,"deviceSn":18},{"component":20,"alarmType":0,"deviceSn":19},{"component":20,"alarmType":0,"deviceSn":20},{"component":20,"alarmType":0,"deviceSn":21},{"component":20,"alarmType":0,"deviceSn":22},{"component":20,"alarmType":0,"deviceSn":23},{"component":20,"alarmType":0,"deviceSn":24},{"component":20,"alarmType":0,"deviceSn":25},{"component":20,"alarmType":0,"deviceSn":26},{"component":20,"alarmType":0,"deviceSn":27},{"component":20,"alarmType":0,"deviceSn":28},{"component":20,"alarmType":0,"deviceSn":29},{"component":20,"alarmType":0,"deviceSn":30},{"component":20,"alarmType":0,"deviceSn":31},{"component":20,"alarmType":0,"deviceSn":32},{"component":20,"alarmType":0,"deviceSn":33},{"component":20,"alarmType":0,"deviceSn":34},{"component":20,"alarmType":0,"deviceSn":35},{"component":20,"alarmType":1,"deviceSn":1},{"component":20,"alarmType":1,"deviceSn":2},{"component":20,"alarmType":1,"deviceSn":3},{"component":20,"alarmType":1,"deviceSn":4},{"component":20,"alarmType":1,"deviceSn":5},{"component":20,"alarmType":1,"deviceSn":6},{"component":30,"alarmType":0,"deviceSn":1},{"component":30,"alarmType":0,"deviceSn":2},{"component":30,"alarmType":0,"deviceSn":3},{"component":30,"alarmType":0,"deviceSn":4},{"component":30,"alarmType":0,"deviceSn":5},{"component":30,"alarmType":0,"deviceSn":6},{"component":30,"alarmType":0,"deviceSn":7},{"component":30,"alarmType":0,"deviceSn":8},{"component":30,"alarmType":0,"deviceSn":9},{"component":30,"alarmType":0,"deviceSn":10},{"component":30,"alarmType":0,"deviceSn":11},{"component":30,"alarmType":0,"deviceSn":12},{"component":30,"alarmType":0,"deviceSn":13},{"component":30,"alarmType":0,"deviceSn":14},{"component":30,"alarmType":0,"deviceSn":15},{"component":30,"alarmType":0,"deviceSn":16},{"component":30,"alarmType":0,"deviceSn":17},{"component":30,"alarmType":0,"deviceSn":18},{"component":30,"alarmType":0,"deviceSn":19},{"component":30,"alarmType":0,"deviceSn":20},{"component":30,"alarmType":0,"deviceSn":21},{"component":30,"alarmType":0,"deviceSn":22},{"component":30,"alarmType":0,"deviceSn":23},{"component":30,"alarmType":0,"deviceSn":24},{"component":30,"alarmType":0,"deviceSn":25},{"component":30,"alarmType":0,"deviceSn":26},{"component":30,"alarmType":0,"deviceSn":27},{"component":30,"alarmType":0,"deviceSn":28},{"component":30,"alarmType":0,"deviceSn":29},{"component":30,"alarmType":0,"deviceSn":30},{"component":30,"alarmType":0,"deviceSn":31},{"component":30,"alarmType":0,"deviceSn":32},{"component":30,"alarmType":0,"deviceSn":33},{"component":30,"alarmType":0,"deviceSn":34},{"component":30,"alarmType":0,"deviceSn":35},{"component":30,"alarmType":0,"deviceSn":36},{"component":30,"alarmType":0,"deviceSn":37},{"component":30,"alarmType":0,"deviceSn":38},{"component":30,"alarmType":0,"deviceSn":39},{"component":30,"alarmType":0,"deviceSn":40},{"component":30,"alarmType":0,"deviceSn":41},{"component":30,"alarmType":0,"deviceSn":42},{"component":30,"alarmType":0,"deviceSn":43},{"component":30,"alarmType":0,"deviceSn":44},{"component":30,"alarmType":0,"deviceSn":45},{"component":30,"alarmType":0,"deviceSn":46},{"component":30,"alarmType":0,"deviceSn":47},{"component":30,"alarmType":0,"deviceSn":48},{"component":30,"alarmType":0,"deviceSn":49},{"component":30,"alarmType":0,"deviceSn":50},{"component":30,"alarmType":0,"deviceSn":51},{"component":30,"alarmType":0,"deviceSn":52}]}'
      res = JSON.parse(resStr);
      resolve(res)
      let list = (res.transportAlarms || []).filter(item => item.alarmType === 1 && item.component === 20)
      if (list.length > 0) {
        $('#friction-welding .sfdj-warning').css('display', 'block')
        $('#friction-welding .sfdj-warning span').text(list.length)
      }
      let list1 = (res.transportAlarms || []).filter(item => item.alarmType === 0 && item.component === 20)
      if (list1.length > 0) {
        $('#friction-welding .bpq-warning').css('display', 'block')
        $('#friction-welding .bpq-warning span').text(list1.length)
      }
    })
    return data
  }
  // 物流线
  async function getInverterInfo() {
    let list = $('#friction-welding .bpq-warning')
    for (let index = 0; index < list.length; index++) {
      const element = list[index];
      element.style.display = 'none'
    }
    $('#friction-welding #transducer').html('')
    $('#friction-welding .weld-materialFlow').html('');
    const data = await new Promise((resolve, reject) => {
      //字符串转json
      resStr =
        '{"InverterInfo":[{"createBy":"OPCUA","createTime":"2025-03-24 17:50:31","updateBy":null,"updateTime":null,"remark":null,"id":null,"belonging":1,"inverterSn":2,"inverterStatus":2},{"createBy":"OPCUA","createTime":"2025-03-24 17:50:31","updateBy":null,"updateTime":null,"remark":null,"id":null,"belonging":1,"inverterSn":2,"inverterStatus":2},{"createBy":"OPCUA","createTime":"2025-03-24 17:50:31","updateBy":null,"updateTime":null,"remark":null,"id":null,"belonging":1,"inverterSn":2,"inverterStatus":2},{"createBy":"OPCUA","createTime":"2025-03-24 17:50:31","updateBy":null,"updateTime":null,"remark":null,"id":null,"belonging":1,"inverterSn":2,"inverterStatus":2},{"createBy":"OPCUA","createTime":"2025-03-24 17:50:31","updateBy":null,"updateTime":null,"remark":null,"id":null,"belonging":1,"inverterSn":2,"inverterStatus":2},{"createBy":"OPCUA","createTime":"2025-03-24 17:50:31","updateBy":null,"updateTime":null,"remark":null,"id":null,"belonging":1,"inverterSn":2,"inverterStatus":2},{"createBy":"OPCUA","createTime":"2025-03-24 17:50:31","updateBy":null,"updateTime":null,"remark":null,"id":null,"belonging":1,"inverterSn":2,"inverterStatus":2},{"createBy":"OPCUA","createTime":"2025-03-24 17:50:31","updateBy":null,"updateTime":null,"remark":null,"id":null,"belonging":1,"inverterSn":2,"inverterStatus":2},{"createBy":"OPCUA","createTime":"2025-03-24 17:50:31","updateBy":null,"updateTime":null,"remark":null,"id":null,"belonging":1,"inverterSn":2,"inverterStatus":2},{"createBy":"OPCUA","createTime":"2025-03-24 17:50:31","updateBy":null,"updateTime":null,"remark":null,"id":null,"belonging":1,"inverterSn":2,"inverterStatus":2},{"createBy":"OPCUA","createTime":"2025-03-24 17:50:31","updateBy":null,"updateTime":null,"remark":null,"id":null,"belonging":1,"inverterSn":2,"inverterStatus":2},{"createBy":"OPCUA","createTime":"2025-03-24 17:50:31","updateBy":null,"updateTime":null,"remark":null,"id":null,"belonging":1,"inverterSn":2,"inverterStatus":2},{"createBy":"OPCUA","createTime":"2025-03-24 17:50:31","updateBy":null,"updateTime":null,"remark":null,"id":null,"belonging":1,"inverterSn":2,"inverterStatus":2},{"createBy":"OPCUA","createTime":"2025-03-24 17:50:31","updateBy":null,"updateTime":null,"remark":null,"id":null,"belonging":1,"inverterSn":2,"inverterStatus":2},{"createBy":"OPCUA","createTime":"2025-03-24 17:50:31","updateBy":null,"updateTime":null,"remark":null,"id":null,"belonging":1,"inverterSn":2,"inverterStatus":2},{"createBy":"OPCUA","createTime":"2025-03-24 17:50:31","updateBy":null,"updateTime":null,"remark":null,"id":null,"belonging":2,"inverterSn":2,"inverterStatus":2},{"createBy":"OPCUA","createTime":"2025-03-24 17:50:31","updateBy":null,"updateTime":null,"remark":null,"id":null,"belonging":2,"inverterSn":2,"inverterStatus":2},{"createBy":"OPCUA","createTime":"2025-03-24 17:50:31","updateBy":null,"updateTime":null,"remark":null,"id":null,"belonging":2,"inverterSn":2,"inverterStatus":2},{"createBy":"OPCUA","createTime":"2025-03-24 17:50:31","updateBy":null,"updateTime":null,"remark":null,"id":null,"belonging":2,"inverterSn":2,"inverterStatus":2},{"createBy":"OPCUA","createTime":"2025-03-24 17:50:31","updateBy":null,"updateTime":null,"remark":null,"id":null,"belonging":2,"inverterSn":2,"inverterStatus":2},{"createBy":"OPCUA","createTime":"2025-03-24 17:50:31","updateBy":null,"updateTime":null,"remark":null,"id":null,"belonging":2,"inverterSn":2,"inverterStatus":2},{"createBy":"OPCUA","createTime":"2025-03-24 17:50:31","updateBy":null,"updateTime":null,"remark":null,"id":null,"belonging":2,"inverterSn":2,"inverterStatus":2},{"createBy":"OPCUA","createTime":"2025-03-24 17:50:31","updateBy":null,"updateTime":null,"remark":null,"id":null,"belonging":2,"inverterSn":2,"inverterStatus":2},{"createBy":"OPCUA","createTime":"2025-03-24 17:50:31","updateBy":null,"updateTime":null,"remark":null,"id":null,"belonging":2,"inverterSn":2,"inverterStatus":2},{"createBy":"OPCUA","createTime":"2025-03-24 17:50:31","updateBy":null,"updateTime":null,"remark":null,"id":null,"belonging":2,"inverterSn":2,"inverterStatus":2},{"createBy":"OPCUA","createTime":"2025-03-24 17:50:31","updateBy":null,"updateTime":null,"remark":null,"id":null,"belonging":2,"inverterSn":2,"inverterStatus":2},{"createBy":"OPCUA","createTime":"2025-03-24 17:50:31","updateBy":null,"updateTime":null,"remark":null,"id":null,"belonging":2,"inverterSn":2,"inverterStatus":2},{"createBy":"OPCUA","createTime":"2025-03-24 17:50:31","updateBy":null,"updateTime":null,"remark":null,"id":null,"belonging":2,"inverterSn":2,"inverterStatus":2},{"createBy":"OPCUA","createTime":"2025-03-24 17:50:31","updateBy":null,"updateTime":null,"remark":null,"id":null,"belonging":2,"inverterSn":2,"inverterStatus":2},{"createBy":"OPCUA","createTime":"2025-03-24 17:50:31","updateBy":null,"updateTime":null,"remark":null,"id":null,"belonging":2,"inverterSn":2,"inverterStatus":2},{"createBy":"OPCUA","createTime":"2025-03-24 17:50:31","updateBy":null,"updateTime":null,"remark":null,"id":null,"belonging":2,"inverterSn":2,"inverterStatus":2},{"createBy":"OPCUA","createTime":"2025-03-24 17:50:31","updateBy":null,"updateTime":null,"remark":null,"id":null,"belonging":2,"inverterSn":2,"inverterStatus":2},{"createBy":"OPCUA","createTime":"2025-03-24 17:50:31","updateBy":null,"updateTime":null,"remark":null,"id":null,"belonging":2,"inverterSn":2,"inverterStatus":2},{"createBy":"OPCUA","createTime":"2025-03-24 17:50:31","updateBy":null,"updateTime":null,"remark":null,"id":null,"belonging":2,"inverterSn":2,"inverterStatus":2},{"createBy":"OPCUA","createTime":"2025-03-24 17:50:31","updateBy":null,"updateTime":null,"remark":null,"id":null,"belonging":2,"inverterSn":2,"inverterStatus":2},{"createBy":"OPCUA","createTime":"2025-03-24 17:50:31","updateBy":null,"updateTime":null,"remark":null,"id":null,"belonging":2,"inverterSn":2,"inverterStatus":2},{"createBy":"OPCUA","createTime":"2025-03-24 17:50:31","updateBy":null,"updateTime":null,"remark":null,"id":null,"belonging":2,"inverterSn":2,"inverterStatus":2},{"createBy":"OPCUA","createTime":"2025-03-24 17:50:31","updateBy":null,"updateTime":null,"remark":null,"id":null,"belonging":2,"inverterSn":2,"inverterStatus":2},{"createBy":"OPCUA","createTime":"2025-03-24 17:50:31","updateBy":null,"updateTime":null,"remark":null,"id":null,"belonging":2,"inverterSn":2,"inverterStatus":2},{"createBy":"OPCUA","createTime":"2025-03-24 17:50:31","updateBy":null,"updateTime":null,"remark":null,"id":null,"belonging":2,"inverterSn":2,"inverterStatus":2},{"createBy":"OPCUA","createTime":"2025-03-24 17:50:31","updateBy":null,"updateTime":null,"remark":null,"id":null,"belonging":2,"inverterSn":2,"inverterStatus":2},{"createBy":"OPCUA","createTime":"2025-03-24 17:50:31","updateBy":null,"updateTime":null,"remark":null,"id":null,"belonging":2,"inverterSn":2,"inverterStatus":2},{"createBy":"OPCUA","createTime":"2025-03-24 17:50:31","updateBy":null,"updateTime":null,"remark":null,"id":null,"belonging":2,"inverterSn":2,"inverterStatus":2},{"createBy":"OPCUA","createTime":"2025-03-24 17:50:31","updateBy":null,"updateTime":null,"remark":null,"id":null,"belonging":2,"inverterSn":2,"inverterStatus":2},{"createBy":"OPCUA","createTime":"2025-03-24 17:50:31","updateBy":null,"updateTime":null,"remark":null,"id":null,"belonging":2,"inverterSn":2,"inverterStatus":2},{"createBy":"OPCUA","createTime":"2025-03-24 17:50:31","updateBy":null,"updateTime":null,"remark":null,"id":null,"belonging":2,"inverterSn":2,"inverterStatus":2},{"createBy":"OPCUA","createTime":"2025-03-24 17:50:31","updateBy":null,"updateTime":null,"remark":null,"id":null,"belonging":2,"inverterSn":2,"inverterStatus":2},{"createBy":"OPCUA","createTime":"2025-03-24 17:50:31","updateBy":null,"updateTime":null,"remark":null,"id":null,"belonging":2,"inverterSn":2,"inverterStatus":2},{"createBy":"OPCUA","createTime":"2025-03-24 17:50:31","updateBy":null,"updateTime":null,"remark":null,"id":null,"belonging":2,"inverterSn":2,"inverterStatus":2},{"createBy":"OPCUA","createTime":"2025-03-24 17:50:31","updateBy":null,"updateTime":null,"remark":null,"id":null,"belonging":2,"inverterSn":2,"inverterStatus":2},{"createBy":"OPCUA","createTime":"2025-03-24 17:50:31","updateBy":null,"updateTime":null,"remark":null,"id":null,"belonging":3,"inverterSn":2,"inverterStatus":2},{"createBy":"OPCUA","createTime":"2025-03-24 17:50:31","updateBy":null,"updateTime":null,"remark":null,"id":null,"belonging":3,"inverterSn":2,"inverterStatus":2},{"createBy":"OPCUA","createTime":"2025-03-24 17:50:31","updateBy":null,"updateTime":null,"remark":null,"id":null,"belonging":3,"inverterSn":2,"inverterStatus":2},{"createBy":"OPCUA","createTime":"2025-03-24 17:50:31","updateBy":null,"updateTime":null,"remark":null,"id":null,"belonging":3,"inverterSn":2,"inverterStatus":2},{"createBy":"OPCUA","createTime":"2025-03-24 17:50:31","updateBy":null,"updateTime":null,"remark":null,"id":null,"belonging":3,"inverterSn":2,"inverterStatus":2},{"createBy":"OPCUA","createTime":"2025-03-24 17:50:31","updateBy":null,"updateTime":null,"remark":null,"id":null,"belonging":3,"inverterSn":2,"inverterStatus":2},{"createBy":"OPCUA","createTime":"2025-03-24 17:50:31","updateBy":null,"updateTime":null,"remark":null,"id":null,"belonging":3,"inverterSn":2,"inverterStatus":2},{"createBy":"OPCUA","createTime":"2025-03-24 17:50:31","updateBy":null,"updateTime":null,"remark":null,"id":null,"belonging":3,"inverterSn":2,"inverterStatus":2},{"createBy":"OPCUA","createTime":"2025-03-24 17:50:31","updateBy":null,"updateTime":null,"remark":null,"id":null,"belonging":3,"inverterSn":2,"inverterStatus":2},{"createBy":"OPCUA","createTime":"2025-03-24 17:50:31","updateBy":null,"updateTime":null,"remark":null,"id":null,"belonging":3,"inverterSn":2,"inverterStatus":2},{"createBy":"OPCUA","createTime":"2025-03-24 17:50:31","updateBy":null,"updateTime":null,"remark":null,"id":null,"belonging":3,"inverterSn":2,"inverterStatus":2},{"createBy":"OPCUA","createTime":"2025-03-24 17:50:31","updateBy":null,"updateTime":null,"remark":null,"id":null,"belonging":3,"inverterSn":2,"inverterStatus":2},{"createBy":"OPCUA","createTime":"2025-03-24 17:50:31","updateBy":null,"updateTime":null,"remark":null,"id":null,"belonging":3,"inverterSn":2,"inverterStatus":2},{"createBy":"OPCUA","createTime":"2025-03-24 17:50:31","updateBy":null,"updateTime":null,"remark":null,"id":null,"belonging":3,"inverterSn":2,"inverterStatus":2},{"createBy":"OPCUA","createTime":"2025-03-24 17:50:31","updateBy":null,"updateTime":null,"remark":null,"id":null,"belonging":3,"inverterSn":2,"inverterStatus":2},{"createBy":"OPCUA","createTime":"2025-03-24 17:50:31","updateBy":null,"updateTime":null,"remark":null,"id":null,"belonging":3,"inverterSn":2,"inverterStatus":2},{"createBy":"OPCUA","createTime":"2025-03-24 17:50:31","updateBy":null,"updateTime":null,"remark":null,"id":null,"belonging":3,"inverterSn":2,"inverterStatus":2},{"createBy":"OPCUA","createTime":"2025-03-24 17:50:31","updateBy":null,"updateTime":null,"remark":null,"id":null,"belonging":3,"inverterSn":2,"inverterStatus":2},{"createBy":"OPCUA","createTime":"2025-03-24 17:50:31","updateBy":null,"updateTime":null,"remark":null,"id":null,"belonging":3,"inverterSn":2,"inverterStatus":2},{"createBy":"OPCUA","createTime":"2025-03-24 17:50:31","updateBy":null,"updateTime":null,"remark":null,"id":null,"belonging":3,"inverterSn":2,"inverterStatus":2},{"createBy":"OPCUA","createTime":"2025-03-24 17:50:31","updateBy":null,"updateTime":null,"remark":null,"id":null,"belonging":3,"inverterSn":2,"inverterStatus":2},{"createBy":"OPCUA","createTime":"2025-03-24 17:50:31","updateBy":null,"updateTime":null,"remark":null,"id":null,"belonging":3,"inverterSn":2,"inverterStatus":2},{"createBy":"OPCUA","createTime":"2025-03-24 17:50:31","updateBy":null,"updateTime":null,"remark":null,"id":null,"belonging":3,"inverterSn":2,"inverterStatus":2},{"createBy":"OPCUA","createTime":"2025-03-24 17:50:31","updateBy":null,"updateTime":null,"remark":null,"id":null,"belonging":3,"inverterSn":2,"inverterStatus":2},{"createBy":"OPCUA","createTime":"2025-03-24 17:50:31","updateBy":null,"updateTime":null,"remark":null,"id":null,"belonging":3,"inverterSn":2,"inverterStatus":2},{"createBy":"OPCUA","createTime":"2025-03-24 17:50:31","updateBy":null,"updateTime":null,"remark":null,"id":null,"belonging":3,"inverterSn":2,"inverterStatus":2},{"createBy":"OPCUA","createTime":"2025-03-24 17:50:31","updateBy":null,"updateTime":null,"remark":null,"id":null,"belonging":3,"inverterSn":2,"inverterStatus":2},{"createBy":"OPCUA","createTime":"2025-03-24 17:50:31","updateBy":null,"updateTime":null,"remark":null,"id":null,"belonging":3,"inverterSn":2,"inverterStatus":2},{"createBy":"OPCUA","createTime":"2025-03-24 17:50:31","updateBy":null,"updateTime":null,"remark":null,"id":null,"belonging":3,"inverterSn":2,"inverterStatus":2},{"createBy":"OPCUA","createTime":"2025-03-24 17:50:31","updateBy":null,"updateTime":null,"remark":null,"id":null,"belonging":3,"inverterSn":2,"inverterStatus":2},{"createBy":"OPCUA","createTime":"2025-03-24 17:50:31","updateBy":null,"updateTime":null,"remark":null,"id":null,"belonging":3,"inverterSn":2,"inverterStatus":2},{"createBy":"OPCUA","createTime":"2025-03-24 17:50:31","updateBy":null,"updateTime":null,"remark":null,"id":null,"belonging":3,"inverterSn":2,"inverterStatus":2},{"createBy":"OPCUA","createTime":"2025-03-24 17:50:31","updateBy":null,"updateTime":null,"remark":null,"id":null,"belonging":3,"inverterSn":2,"inverterStatus":2},{"createBy":"OPCUA","createTime":"2025-03-24 17:50:31","updateBy":null,"updateTime":null,"remark":null,"id":null,"belonging":3,"inverterSn":2,"inverterStatus":2},{"createBy":"OPCUA","createTime":"2025-03-24 17:50:31","updateBy":null,"updateTime":null,"remark":null,"id":null,"belonging":3,"inverterSn":2,"inverterStatus":2},{"createBy":"OPCUA","createTime":"2025-03-24 17:50:31","updateBy":null,"updateTime":null,"remark":null,"id":null,"belonging":3,"inverterSn":2,"inverterStatus":2},{"createBy":"OPCUA","createTime":"2025-03-24 17:50:31","updateBy":null,"updateTime":null,"remark":null,"id":null,"belonging":3,"inverterSn":2,"inverterStatus":2},{"createBy":"OPCUA","createTime":"2025-03-24 17:50:31","updateBy":null,"updateTime":null,"remark":null,"id":null,"belonging":3,"inverterSn":2,"inverterStatus":2},{"createBy":"OPCUA","createTime":"2025-03-24 17:50:31","updateBy":null,"updateTime":null,"remark":null,"id":null,"belonging":3,"inverterSn":2,"inverterStatus":2},{"createBy":"OPCUA","createTime":"2025-03-24 17:50:31","updateBy":null,"updateTime":null,"remark":null,"id":null,"belonging":3,"inverterSn":2,"inverterStatus":2},{"createBy":"OPCUA","createTime":"2025-03-24 17:50:31","updateBy":null,"updateTime":null,"remark":null,"id":null,"belonging":3,"inverterSn":2,"inverterStatus":2},{"createBy":"OPCUA","createTime":"2025-03-24 17:50:31","updateBy":null,"updateTime":null,"remark":null,"id":null,"belonging":3,"inverterSn":2,"inverterStatus":2},{"createBy":"OPCUA","createTime":"2025-03-24 17:50:31","updateBy":null,"updateTime":null,"remark":null,"id":null,"belonging":3,"inverterSn":2,"inverterStatus":2},{"createBy":"OPCUA","createTime":"2025-03-24 17:50:31","updateBy":null,"updateTime":null,"remark":null,"id":null,"belonging":3,"inverterSn":2,"inverterStatus":2},{"createBy":"OPCUA","createTime":"2025-03-24 17:50:31","updateBy":null,"updateTime":null,"remark":null,"id":null,"belonging":3,"inverterSn":2,"inverterStatus":2},{"createBy":"OPCUA","createTime":"2025-03-24 17:50:31","updateBy":null,"updateTime":null,"remark":null,"id":null,"belonging":3,"inverterSn":2,"inverterStatus":2},{"createBy":"OPCUA","createTime":"2025-03-24 17:50:31","updateBy":null,"updateTime":null,"remark":null,"id":null,"belonging":3,"inverterSn":2,"inverterStatus":2},{"createBy":"OPCUA","createTime":"2025-03-24 17:50:31","updateBy":null,"updateTime":null,"remark":null,"id":null,"belonging":3,"inverterSn":2,"inverterStatus":2},{"createBy":"OPCUA","createTime":"2025-03-24 17:50:31","updateBy":null,"updateTime":null,"remark":null,"id":null,"belonging":3,"inverterSn":2,"inverterStatus":2},{"createBy":"OPCUA","createTime":"2025-03-24 17:50:31","updateBy":null,"updateTime":null,"remark":null,"id":null,"belonging":3,"inverterSn":2,"inverterStatus":2},{"createBy":"OPCUA","createTime":"2025-03-24 17:50:31","updateBy":null,"updateTime":null,"remark":null,"id":null,"belonging":3,"inverterSn":2,"inverterStatus":2},{"createBy":"OPCUA","createTime":"2025-03-24 17:50:31","updateBy":null,"updateTime":null,"remark":null,"id":null,"belonging":3,"inverterSn":2,"inverterStatus":2}],"updateTime":1742809831257,"RgvInfo":[{"createBy":"OPCUA","createTime":"2025-03-24 17:50:31","updateBy":null,"updateTime":null,"remark":null,"id":null,"belonging":1,"logisticsLineSn":1,"logisticsLineStatus":2},{"createBy":"OPCUA","createTime":"2025-03-24 17:50:31","updateBy":null,"updateTime":null,"remark":null,"id":null,"belonging":1,"logisticsLineSn":2,"logisticsLineStatus":2},{"createBy":"OPCUA","createTime":"2025-03-24 17:50:31","updateBy":null,"updateTime":null,"remark":null,"id":null,"belonging":1,"logisticsLineSn":3,"logisticsLineStatus":2},{"createBy":"OPCUA","createTime":"2025-03-24 17:50:31","updateBy":null,"updateTime":null,"remark":null,"id":null,"belonging":1,"logisticsLineSn":4,"logisticsLineStatus":2},{"createBy":"OPCUA","createTime":"2025-03-24 17:50:31","updateBy":null,"updateTime":null,"remark":null,"id":null,"belonging":1,"logisticsLineSn":5,"logisticsLineStatus":2},{"createBy":"OPCUA","createTime":"2025-03-24 17:50:31","updateBy":null,"updateTime":null,"remark":null,"id":null,"belonging":1,"logisticsLineSn":6,"logisticsLineStatus":2},{"createBy":"OPCUA","createTime":"2025-03-24 17:50:31","updateBy":null,"updateTime":null,"remark":null,"id":null,"belonging":1,"logisticsLineSn":7,"logisticsLineStatus":2},{"createBy":"OPCUA","createTime":"2025-03-24 17:50:31","updateBy":null,"updateTime":null,"remark":null,"id":null,"belonging":1,"logisticsLineSn":8,"logisticsLineStatus":2},{"createBy":"OPCUA","createTime":"2025-03-24 17:50:31","updateBy":null,"updateTime":null,"remark":null,"id":null,"belonging":1,"logisticsLineSn":9,"logisticsLineStatus":2},{"createBy":"OPCUA","createTime":"2025-03-24 17:50:31","updateBy":null,"updateTime":null,"remark":null,"id":null,"belonging":1,"logisticsLineSn":10,"logisticsLineStatus":2},{"createBy":"OPCUA","createTime":"2025-03-24 17:50:31","updateBy":null,"updateTime":null,"remark":null,"id":null,"belonging":2,"logisticsLineSn":1,"logisticsLineStatus":2},{"createBy":"OPCUA","createTime":"2025-03-24 17:50:31","updateBy":null,"updateTime":null,"remark":null,"id":null,"belonging":2,"logisticsLineSn":2,"logisticsLineStatus":2},{"createBy":"OPCUA","createTime":"2025-03-24 17:50:31","updateBy":null,"updateTime":null,"remark":null,"id":null,"belonging":2,"logisticsLineSn":3,"logisticsLineStatus":2},{"createBy":"OPCUA","createTime":"2025-03-24 17:50:31","updateBy":null,"updateTime":null,"remark":null,"id":null,"belonging":2,"logisticsLineSn":4,"logisticsLineStatus":2},{"createBy":"OPCUA","createTime":"2025-03-24 17:50:31","updateBy":null,"updateTime":null,"remark":null,"id":null,"belonging":2,"logisticsLineSn":5,"logisticsLineStatus":2},{"createBy":"OPCUA","createTime":"2025-03-24 17:50:31","updateBy":null,"updateTime":null,"remark":null,"id":null,"belonging":2,"logisticsLineSn":6,"logisticsLineStatus":2},{"createBy":"OPCUA","createTime":"2025-03-24 17:50:31","updateBy":null,"updateTime":null,"remark":null,"id":null,"belonging":2,"logisticsLineSn":7,"logisticsLineStatus":2},{"createBy":"OPCUA","createTime":"2025-03-24 17:50:31","updateBy":null,"updateTime":null,"remark":null,"id":null,"belonging":2,"logisticsLineSn":8,"logisticsLineStatus":2},{"createBy":"OPCUA","createTime":"2025-03-24 17:50:31","updateBy":null,"updateTime":null,"remark":null,"id":null,"belonging":2,"logisticsLineSn":9,"logisticsLineStatus":2},{"createBy":"OPCUA","createTime":"2025-03-24 17:50:31","updateBy":null,"updateTime":null,"remark":null,"id":null,"belonging":2,"logisticsLineSn":10,"logisticsLineStatus":2},{"createBy":"OPCUA","createTime":"2025-03-24 17:50:31","updateBy":null,"updateTime":null,"remark":null,"id":null,"belonging":3,"logisticsLineSn":1,"logisticsLineStatus":2},{"createBy":"OPCUA","createTime":"2025-03-24 17:50:31","updateBy":null,"updateTime":null,"remark":null,"id":null,"belonging":3,"logisticsLineSn":2,"logisticsLineStatus":2},{"createBy":"OPCUA","createTime":"2025-03-24 17:50:31","updateBy":null,"updateTime":null,"remark":null,"id":null,"belonging":3,"logisticsLineSn":3,"logisticsLineStatus":2},{"createBy":"OPCUA","createTime":"2025-03-24 17:50:31","updateBy":null,"updateTime":null,"remark":null,"id":null,"belonging":3,"logisticsLineSn":4,"logisticsLineStatus":2},{"createBy":"OPCUA","createTime":"2025-03-24 17:50:31","updateBy":null,"updateTime":null,"remark":null,"id":null,"belonging":3,"logisticsLineSn":5,"logisticsLineStatus":2},{"createBy":"OPCUA","createTime":"2025-03-24 17:50:31","updateBy":null,"updateTime":null,"remark":null,"id":null,"belonging":3,"logisticsLineSn":6,"logisticsLineStatus":2},{"createBy":"OPCUA","createTime":"2025-03-24 17:50:31","updateBy":null,"updateTime":null,"remark":null,"id":null,"belonging":3,"logisticsLineSn":7,"logisticsLineStatus":2},{"createBy":"OPCUA","createTime":"2025-03-24 17:50:31","updateBy":null,"updateTime":null,"remark":null,"id":null,"belonging":3,"logisticsLineSn":8,"logisticsLineStatus":2},{"createBy":"OPCUA","createTime":"2025-03-24 17:50:31","updateBy":null,"updateTime":null,"remark":null,"id":null,"belonging":3,"logisticsLineSn":9,"logisticsLineStatus":2},{"createBy":"OPCUA","createTime":"2025-03-24 17:50:31","updateBy":null,"updateTime":null,"remark":null,"id":null,"belonging":3,"logisticsLineSn":10,"logisticsLineStatus":2}]}'
      res = JSON.parse(resStr);
      console.log(res);
      resolve(res)
      var updateTime = formatDateTime(res.updateTime);
      let str = '';
      // 遍历 RgvInfo 数组 物流线
      (res.RgvInfo || []).filter(item => item.belonging === 2).forEach(function (rgv, index) {
        str += `<div class="common-item">
                      <div class="title">物流线-${rgv.logisticsLineSn}</div>
                      <div class="status ${rgv.logisticsLineStatus === 0 ? 'yellow' : rgv.logisticsLineStatus === 2 ? 'green' : rgv.logisticsLineStatus === 1 ? 'red' : 'blue'
          }">${rgv.logisticsLineStatus === 0 ? '有料' : rgv.logisticsLineStatus === 1 ? '无料' : rgv.logisticsLineStatus === 2 ? '转运' : '定位'
          }</div>
            </div>`;
      });
      $('#friction-welding .weld-materialFlow').html(str);
      let str1 = '';
      // 遍历 InverterInfo 数组 变频器
      (res.InverterInfo || []).filter(item => item.belonging === 2).forEach(function (inverter, index) {
        str1 += `<div class="common-item">
                      <div class="title">变频器-${inverter.inverterSn}</div>
                      <div class="status ${inverter.inverterStatus === 0 ? 'yellow' : inverter.inverterStatus === 1 ? 'green' : inverter.inverterStatus === 2 ? 'red' : 'blue'
          }">${inverter.inverterStatus === 0 ? '停止' : inverter.inverterStatus === 1 ? '运行' : inverter.inverterStatus === 2 ? '报警' : '定位'
          }</div>
            </div>`;
        if (inverter.inverterStatus === 2) {
          $(`.bpq-${inverter.inverterSn}`).css('display', 'block')
        }
      });
      $('#friction-welding #transducer').html(str1);
    })
    return data
  }
  // 转换报警类型
  function transType(params) {
    switch (params) {
      case 0:
        return '主轴水冷机'
        break;
      case 1:
        return '刀具水冷机'
        break;
      case 2:
        return '压板'
        break;
      case 3:
        return '升降垫板'
        break;
      case 4:
        return '小车'
        break;
      case 5:
        return '侧向定位'
        break;
      case 6:
        return '侧推'
        break;
      case 7:
        return '换刀'
        break;
      case 8:
        return '主机轴'
        break;
      case 9:
        return '液压站温度'
        break;
      case 10:
        return '液压站液位'
        break;
      case 11:
        return '数控系统'
        break;

      default:
        return ''
        break;
    }
  }
  // 初始请求一次
  getInitAllData()
  // 每15秒轮询一次
  // setInterval(getInitAllData, refleshAlarm);
  function getInitAllData() {
    // 清空数据
    $('#friction-welding span').text('')
    $('#friction-welding .warning-box').css('display', 'none');
    updateProgress('.progress .progress-bar', 0)
    let warningMarks = $('#friction-welding .warning-mark')
    for (let index = 0; index < warningMarks.length; index++) {
      const element = warningMarks[index];
      element.style['animation-delay'] = `${Math.random() * 5}s`
    }
    warningStr = ''
    Promise.all([getWeldingStatusInfo(), getWeldingAlarmInfo(), getInverterInfo(), getTransportAlarmsInfo()]).then(([
      weldingStatusInfo, weldingAlarmInfo, inverterInfo, transportAlarmsInfo
    ]) => {
      console.log(weldingStatusInfo, weldingAlarmInfo, inverterInfo, transportAlarmsInfo, 'all');

      // 遍历 transportAlarms 数组
      (transportAlarmsInfo.transportAlarms || []).filter(item => item.component === 20).forEach(function (alarm,
        index) {
        warningStr += `<div class="tip-wrapper-list-item alarm1">
								<div style="display: flex; align-items: center" class="alarms">
									<div  class="alarms">${alarm.alarmType > 1 && alarm.alarmType < 9 ? `${alarm.deviceSn}号` : ''}${transType(alarm.alarmType)}报警</div>
								</div>
								<div style="font-size: 14px"  class="alarms">${formatDateTime(transportAlarmsInfo.updateTime)}</div>
							</div>`
      });
      $('#friction-welding #tip-wrapper-list-content').html(warningStr)
      let warningContents = $('#friction-welding .warning-box')
      let hasWarning = false
      for (let index = 0; index < warningContents.length; index++) {
        const element = warningContents[index];
        if (!hasWarning) {
          if (element.style.display === 'block') hasWarning = true
        }
      }
      $('#friction-welding .normal-status').css('display', hasWarning ? 'none' : 'block')
    }).catch(err => {
      console.log(err);
    })
  }

  function updateProgress(ele, percent, needText) {
    $(`${ele}`)
      .attr('aria-valuenow', percent)
      .css('width', percent + '%')
    if (needText) $(`${ele}`).text(percent + '%');
  }

  function formatDateTime(updateTime) {
    var date = new Date(updateTime);
    var formatted =
      // date.getFullYear() +
      // '-' +
      // String(date.getMonth() + 1).padStart(2, '0') +
      // '-' +
      // String(date.getDate()).padStart(2, '0') +
      // ' ' +
      String(date.getHours()).padStart(2, '0') +
      ':' +
      String(date.getMinutes()).padStart(2, '0') +
      ':' +
      String(date.getSeconds()).padStart(2, '0');

    return formatted;
  }
</script>
<style lang="less">
  #friction-welding {
    display: flex;
    flex-direction: column;
    height: 100%;

    .common-item {
      display: flex;

      .title {
        font-size: 20px;
        color: #ffffff;
        white-space: nowrap;
      }

      .status {
        font-weight: 600;
        font-size: 24px;
        color: #69d9fe;
        text-align: center;
        white-space: nowrap;
      }
    }

    .warning-box {
      position: absolute;
      width: fit-content;
      z-index: 1;
      width: 157px;

      .warning-content {
        height: 72px;
        width: 100%;
        background: url(img/loading/alert-bg-1.png);
        background-size: 100% 100%;
        padding-top: 10px;
        min-width: fit-content;

        .warning-title {
          font-weight: 600;
          font-size: 18px;
          color: rgba(255, 133, 89, 1);
          text-align: center;
          white-space: nowrap;
        }

        .warning-text {
          font-weight: 500;
          font-size: 16px;
          text-align: center;
          color: #FFFFFF;
          white-space: nowrap;
        }
      }

      .warning-mark {
        width: 30px;
        height: 30px;
        background-size: 100% 100%;
        margin-left: 30px;
        animation: blink 1.5s linear infinite;

        img {
          width: 100%;
          height: 100%;
        }

      }

      /* display: none; */
    }

    .station {
      width: 114px;
      height: 114px;
      position: relative;
      right: 100px;
      margin-left: 185px;

      img {
        width: 100%;
      }

      .ywzyw-warning {
        width: 197px;
        right: -118%;
        bottom: -52%;

        .warning-content {
          height: 41px;
          line-height: 24px;
        }
      }

      .ywzwd-warning {
        width: 197px;
        height: 41px;
        left: -99%;
        top: -14%;

        .warning-content {
          height: 41px;
          line-height: 24px;
        }
      }

      .temperature {
        position: absolute;
        left: -10px;
        top: 30px;

        &::before {
          content: '';
          position: absolute;
          left: -20px;
          top: 30px;
          width: 48px;
          height: 1px;
          top: 50px;
          width: 48px;
          background: #F69A3D;
        }

        &::after {
          content: '';
          position: absolute;
          left: -20px;
          top: 30px;
          width: 4px;
          height: 4px;
          top: 48px;
          border-radius: 50%;
          background: #F69A3D;
        }

        .desc {
          position: absolute;
          left: -104px;
          top: 28px;
          width: 30px;
          color: #F69A3D;
          min-width: fit-content;
          text-align: right;

          .num {
            font-weight: bold;
            font-size: 20px;
          }
        }
      }

      .liquid-level {
        position: absolute;
        right: -10px;
        top: 30px;

        &::before {
          content: '';
          position: absolute;
          left: -30px;
          top: -4px;
          width: 48px;
          height: 1px;
          width: 48px;
          background: #69D9FE;
        }

        &::after {
          content: '';
          position: absolute;
          right: -20px;
          top: -6px;
          width: 4px;
          height: 4px;
          border-radius: 50%;
          background: #69D9FE;
        }

        .desc {
          position: absolute;
          right: -104px;
          top: -24px;
          width: 30px;
          color: #69D9FE;
          min-width: fit-content;

          .num {
            font-weight: bold;
            font-size: 20px;
          }
        }
      }
    }

    .title-con {
      font-weight: 500;
      font-size: 20px;
      color: #ffffff;
      line-height: 33px;
      background: url(img/loading/title-icon-bg.png);
      background-size: 100% 100%;
      height: 59px;
      width: 481px;
      height: 41px;

      /* margin-top: 20px; */
      div {
        margin-left: 70px;
        display: inline;
      }

      &.run-status {
        /* width: 609px !important;
        height: 46px; */

        div {
          /* margin-left: 90px; */
        }
      }
    }

    .bar-item {
      justify-content: space-between;
      align-items: center;
      font-size: 14px;

      &:not(:last-of-type) {
        margin-bottom: 3px;

      }

      .left {
        display: flex;
        align-items: center;
        flex-direction: row !important;
      }

      .left-bar {
        width: 15px;
        height: 15px;
        border-radius: 2px;
        margin-right: 10px;
      }

      display: flex;

      .title {
        font-size: 14px;
        color: #ffffff;
      }

      .status {
        font-weight: 600;
        font-size: 24px;
        color: #69d9fe;
        text-align: center;
      }
    }

    .content-container {
      flex: 1;
      position: relative;
      display: flex;
      flex-direction: column;
      background: linear-gradient(90deg,
          rgba(52, 203, 237, 0.1) 0%,
          rgba(102, 230, 255, 0.25) 54%,
          rgba(52, 192, 237, 0.1) 100%);
      border: 1px solid rgba(102, 230, 255, 0.25);
      transition: opacity 0.25s ease;

      .line {
        width: 100%;
        height: 11px;
        background: linear-gradient(90deg,
            #0a3c4c 0%,
            rgba(10, 58, 73, 0) 50%,
            #093746 100%);
      }

      .bar {
        width: 3px;
        position: absolute;
        background: #62fff6;
        height: 11px;
      }

      .left-top-bar {
        top: 0;
        left: 0;
      }

      .right-top-bar {
        top: 0;
        right: 0;
      }

      .left-bottom-bar {
        bottom: 0;
        left: 0;
      }

      .right-bottom-bar {
        bottom: 0;
        right: 0;
      }
    }

    .main-con {
      flex: 1;
      background-image: url(img/loading/screen-bg.png);
      background-size: 100% 100%;
      padding: 10px;
      display: flex;
      flex-direction: column;
      padding-bottom: 20px;
      background-repeat: no-repeat;

      .top {
        width: 100%;
        height: 30%;
        min-height: 300px;
        position: relative;
        margin-bottom: 20px;

        /* .monitor-wrapper {
          position: absolute;
          left: 20px;
          right: 20px;
          top: 0;
          width: calc(100% - 50px);
          bottom: 0;
          z-index: 3; */

        .monitor-header {
          display: flex;
          height: 100%;
          width: 100%;
          margin-bottom: 20px;
          padding-left: 80px;


          .left {
            width: calc(100% - 150px);
            position: relative;

            .normal-status {
              position: absolute;
              left: 50%;
              transform: translateX(-50%);
              top: 15%;
              width: 120px;
              height: 141px;

              img {
                width: 100%;
              }
            }
          }

          .right {
            position: absolute;
            left: 50%;
            width: calc(50% - 10px);
          }

          .load-icon {
            margin-left: 15px;
            margin-top: 17px;
            margin-right: 30px;
            width: 81px;
            position: absolute;

            /* height: calc(100% - 30px); */
            &.machine-1 {
              bottom: -97px;
              left: 30px;
            }

            &.machine-2 {
              bottom: -97px;
              left: 28%;
            }

            &.machine-3 {
              bottom: -97px;
              left: 56%;
            }

            &.machine-4 {
              bottom: -97px;
              left: 80%;
            }
          }

          .bpq-warning {
            left: 1%;
            top: 22%;
          }

          .djsl-warning {
            left: 29%;
            top: 4%;
            z-index: 3;
          }

          .zzsl-warning {
            left: 41%;
            top: 13%;
          }

          .skxt-warning {
            left: 22%;
            top: 9%;

            .warning-content {
              height: 41px !important;
            }
          }

          .cxdwbj-warning {
            left: 1%;
            top: 36%;
            transform: translateY(-50%);

            .warning-content {
              width: 210px !important;
            }

          }

          .yb-warning {
            left: 15%;
            top: -2%;
          }

          .sjdb-warning {
            left: 39%;
            bottom: 0%;

            .warning-content {
              width: 210px !important;
            }
          }

          .xc-warning {
            left: 19%;
            bottom: 1%;
          }

          .hd-warning {
            left: 9%;
            bottom: 7%;
          }

          .zjz-warning {
            left: 10%;
            top: 33%;
          }

          .sfdj-warning {
            left: 44%;
            bottom: 23%;
          }

          .ct-warning {
            left: 35%;
            bottom: 21%;
          }

          .cxdw-warning {
            left: 20%;
            top: 37%;

            .warning-content {
              width: 210px !important;
            }
          }

          .structure {
            width: 100%;
            height: -webkit-fill-available;
            position: absolute;
          }

          .tip {
            width: 82px;
            height: 80px;
            margin-top: 12px;
          }
        }

        .monitor-status {
          display: flex;
          margin: 10px 12px;

          &-item {
            width: 32%;
            position: relative;

            &-title {
              font-family: AlibabaPuHuiTi, AlibabaPuHuiTi;
              font-weight: 500;
              font-size: 14px;
              color: #ffffff;
              text-align: left;
              font-style: normal;
              position: absolute;
              left: 52px;
              top: 2px;
            }

            .timer {
              position: absolute;
              right: 10px;
              bottom: 0px;
              font-family: AlibabaPuHuiTi, AlibabaPuHuiTi;
              font-weight: 400;
              font-size: 8px;
              color: #ffffff;
              line-height: 22px;
              text-align: left;
              font-style: normal;
            }
          }

          .status-title-img {
            width: 100%;
            height: 30px;
          }
        }

        .monitor-count {
          display: flex;
          margin: 0 12px;

          &-item {
            width: 313px;
            margin-right: 10px;
            position: relative;

            .count-img {
              width: 100%;
              height: 45px;
            }

            &-title {
              font-family: AlibabaPuHuiTi, AlibabaPuHuiTi;
              font-weight: 500;
              font-size: 13px;
              color: #ffffff;
              line-height: 45px;
              text-align: left;
              font-style: normal;
              display: flex;
              justify-content: space-between;
              position: absolute;
              left: 0;
              right: 0;
              padding: 0 13px;
              top: 0;

              .num {
                font-family: DINAlternate, DINAlternate;
                font-weight: bold;
                font-size: 18px;
                color: #69d9fe;
                text-align: center;
                font-style: normal;
                text-transform: none;
              }
            }
          }
        }

        /* } */

        .right {
          .content-container {
            margin: 10px 0;
            padding-left: 20px;
          }

          .common-item {
            flex-direction: column;
            margin-right: 20px;
          }
        }
      }

      .flex {
        display: flex;

      }

      .bottom-content {

        min-height: fit-content !important;
        margin-top: 20px;
      }

      .position-container {
        margin: 0 10px;
        border-top: 1px dashed #BCD2FF;

        .running-status .flex {
          padding-left: 20px;

          .common-item {
            width: 33.33% !important;
            margin-bottom: 3px !important;

            &.milling {
              width: 100% !important;
            }
          }
        }

        .title {
          font-weight: 400;
          font-size: 14px;
          width: fit-content;
          white-space: nowrap;
        }

        .status {
          width: fit-content;
          font-size: 18px;
        }
      }

      .middle {
        /* flex: 1; */
        display: flex;
        margin-bottom: 10px;

        >.flex {
          /* flex: 1; */
          display: flex;
          flex-direction: column;
          max-width: 50%;
          flex: 1;

          .flex {
            flex: 1;

            >div {
              max-width: 50%;

            }
          }

          .machine {
            display: flex;
            flex-direction: column;

            .flex .common-item {
              flex-direction: column;
              margin-right: 20px;
              align-items: center;

              .title {

                font-size: 18px;
              }
            }
          }

          .item {
            padding-left: 10px;
          }

          .title-con {
            width: 459px;
            margin-bottom: 10px;
          }

          .content {
            /* flex: 1; */
            display: flex;
            flex-direction: column;
          }

        }

        .upper-milling,
        .down-milling,
        .upper-welding,
        .down-welding {
          min-width: calc(50% - 5px);
          display: flex;
          flex-direction: column;

          .left {
            height: -webkit-fill-available;
          }

          .monitor-count-status {
            &:first-of-type {
              min-width: 40%;
            }

            &:last-of-type {
              min-width: 60%;
            }
          }

          .content-container {
            flex: 1;
          }
        }

        .item {
          width: 50%;
        }

        .left .common-item,
        .right .common-item {
          padding-top: 5px;

          align-items: flex-start;
          justify-content: flex-start;

          &.milling {
            padding-top: 0;
          }
        }

        .left .running-status .common-item {
          width: 16.66%;
        }

        .content-container {
          margin-left: 40px;
        }

        .collapse-con {
          display: flex;
          justify-content: flex-end;
          padding-right: 10px;
          padding-bottom: 10px;
          font-weight: 600;
          font-size: 14px;
          color: #69D9FE;
          cursor: pointer;
          width: fit-content;
          align-self: flex-end;
          display: none;

          .icon {
            display: flex;
            align-items: center;

            img {
              width: 16px;
              height: 16px;
              margin-left: 5px;
            }
          }
        }

        .rotate-speed {
          display: flex;
          justify-content: center;
          align-items: center;
          background: url(img/loading/rotate-speed.png);
          background-size: 100%;
          width: 63px;
          height: 64px;
          margin: 5px auto;
          font-size: 28px;
          color: #ffffff;
        }

        .common-item {
          justify-content: space-between;
        }

        .left {
          display: flex;
          flex-direction: column;
          flex: 1;

          .content {
            padding: 0 10px !important;
            flex: 1;
          }
        }



        .monitor-count-status {
          width: 50%;
          min-width: 50%;
          flex: 1;
          padding-left: 10px;

          .monitor-count-status-desc .title {
            font-weight: 600;
            font-size: 18px;
            color: #69D9FE;
            margin: 10px 0;
            white-space: nowrap;
          }

          .progress {
            min-width: calc(100% - 60px);
            border: 1px solid #509AFF;
            height: 28px;
            background-color: transparent;
            padding: 5px;
            margin-bottom: 10px;

            .progress-bar {
              background: linear-gradient(270deg, #7CB2FF 0%, #2E79CF 100%);
              overflow: hidden;
              height: 18px;
              max-width: 100%;
            }
          }

          .num {
            font-weight: bold;
            font-size: 19px;
            color: #FFFFFF;
            margin-left: 10px;
          }

        }

        .left {


          .status {
            display: flex;
            justify-content: space-around;

            .common-item {
              display: flex;
              flex-direction: column;
              justify-content: center;
            }
          }
        }

        >.left,
        .right {
          max-width: calc(50% - 5px);

          .title-con {
            margin-left: 10px;

            span {}
          }

          .content-container {
            margin-bottom: 10px;
          }



          .content {
            padding: 5px 20px;
            display: flex;

            .content {
              display: flex;

              flex-direction: row;

              .left {
                min-width: 30%;

                .run-status {
                  width: 100%;
                  height: 50%;
                  position: relative;
                  /* background: url(img/loading/running-bg.png); */
                  background-size: 100%;
                  background-repeat: no-repeat;

                  >img {
                    position: absolute;
                    height: 100%;
                    left: 50%;
                    transform: translateX(-50%);
                  }

                  .inner {
                    width: 100%;
                    position: absolute;
                    height: 100%;
                    /* background: url(img/loading/normal-bg.png); */
                    background-size: 100%;
                    background-repeat: no-repeat;
                    margin: auto;
                    font-size: 20px;
                    color: #ffffff;
                    font-weight: 500;
                    display: flex;
                    justify-content: center;
                    align-items: center;

                    >img {
                      position: absolute;
                      height: 100%;
                      left: 50%;
                      transform: translateX(-50%);
                    }

                    span {
                      position: absolute;
                    }
                  }
                }

                .work-status {
                  font-size: 20px;
                  color: #ffffff;
                  margin: 10px 0;
                }

                .common-item {
                  width: 100%;
                  align-items: center;
                  justify-content: space-between;

                  .title {
                    font-size: 16px;
                  }

                  .status {
                    font-size: 21px;
                  }
                }
              }

              .center {
                width: 34%;
                min-width: 34%;
                padding: 10px 30px;
                display: flex;
                flex-direction: column;

                .position {
                  flex: 1;
                  justify-content: space-around;
                  display: flex;
                  flex-direction: column;

                  .common-item {
                    margin-top: 10px;
                    height: 45px;
                    background: url(img/loading/text-bg.png) no-repeat;
                    background-size: 100% 100%;
                    justify-content: space-between;
                    align-items: center;
                    padding: 0 40px;

                    .title,
                    .status {
                      font-size: 20px;
                      font-weight: 600;
                    }

                    .title {
                      padding: 0 10px;
                    }

                    .status {
                      font-size: 24px;
                    }

                    &:first-of-type {

                      .title,
                      .status {
                        color: #f16060;
                      }
                    }

                    &:nth-of-type(2) {

                      .title,
                      .status {
                        color: #f2a90e;
                      }
                    }

                    &:last-of-type {

                      .title,
                      .status {
                        color: #13e7ff;
                      }
                    }
                  }
                }
              }

              .right {
                flex: 1;
                min-width: 30%;
                display: flex;
                flex-direction: column;


              }
            }
          }
        }

        .middle-content {
          display: flex;
          padding: 5px 10px;

          .left-item {
            width: 30%;
            display: flex;
            align-items: center;
            flex-direction: column;

            .count-circle {
              position: relative;

              img {
                width: 100%;
                position: absolute;
                z-index: 1;
              }

              background-size: 100%;
              width: 110px;
              height: 110px;
              display: flex;
              align-items: center;
              justify-content: center;

              .progress-ring {
                --size: 78px;
                /* 圆环尺寸 */
                --border: 5px;
                /* 圆环粗细 */
                --color: transparent;
                /* 进度颜色 */
                --bg: #42b983;
                /* 背景颜色 */

                width: var(--size);
                height: var(--size);
                border-radius: 50%;
                background: conic-gradient(var(--color) calc((calc(100 - var(--progress)) * 3.6deg)),
                    var(--bg) 0);
                position: relative;
              }

              .progress-ring__content {
                position: absolute;
                width: calc(100% - 2 * var(--border));
                height: calc(100% - 2 * var(--border));
                background: #274875;
                border-radius: 50%;
                top: var(--border);
                left: var(--border);
                display: flex;
                align-items: center;
                justify-content: center;
                font-family: Arial;
                color: #44e1ff;
                font-size: 24px;
              }
            }
          }

          .right-item {
            flex: 1;

            .common-item {
              align-items: center;
              justify-content: space-between;
              margin-bottom: 10px;

              .status {
                font-size: 20px;
              }
            }
          }
        }

        .middle-content {
          display: flex;
          max-height: calc(100% - 200px);
          flex: 1;
          min-width: 50%;

          &.right-content {
            padding: 0;

            .left-content {
              align-items: center;
            }
          }

          .left-content {
            width: calc(100% - 10px);
            min-width: 50%;
            /* padding-left: 20px; */
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            justify-content: flex-start;
            flex: 1;


          }

          .right-content {
            padding-left: 30px;
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            padding-bottom: 20px;

            .common-item {
              flex-direction: column;
              align-items: flex-start;

              .status {
                color: #ffeda8;
              }
            }
          }
        }
      }

      .bottom {

        .left,
        .right {
          flex: 1;

          .running-status {
            max-height: 185px;
            overflow-y: auto;
            overflow-x: hidden;
          }
        }
      }

      .running-status {
        /* min-height: 227px; */

        .flex {
          display: flex;
          padding: 0 20px 0 50px;
          flex-wrap: wrap;

          .common-item {
            width: 10%;
            flex-direction: column;

            .title {
              font-size: 14px;
              background: linear-gradient(270deg,
                  rgba(55, 108, 186, 0.1) 0%,
                  rgba(198, 245, 255, 0.16) 100%);
              border-radius: 6px 6px 6px 15px;
              padding: 3px 20px 3px 10px;
              white-space: nowrap;
              margin: 5px 10px 5px 0;
            }

            .status {
              font-size: 18px;
              text-align: left;

              &.yellow {
                color: #FFEDA8;
              }

              &.green {
                color: #39E9A1;
              }

              &.red {
                color: #FF4836;
              }

              &.blue {
                color: #64CEFF;
              }
            }
          }
        }
      }
    }

    .tip-wrapper {
      cursor: pointer;
      position: absolute;
      right: 0;
      z-index: 99;
    }

    .tip-wrapper-list {
      position: absolute;
      right: 0;
      top: 0;
      /* width: 364px; */
      background: #ffffff;
      border-radius: 4px;
      z-index: 100;
      padding: 18px;
      display: none;
      z-index: 9;
    }

    #tip-wrapper-list-content {
      max-height: calc(100vh - 400px);
      overflow-y: auto;
    }

    .tip-wrapper-list-item {
      width: 364px;
      height: 31px;
      line-height: 31px;
      box-sizing: border-box;
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 0 5px;
      font-weight: 400;
      font-size: 16px;
      color: #00173a;
      text-align: left;
      font-style: normal;
      margin-bottom: 10px;
      position: relative;
      padding: 0 10px 0 26px;

      &::before {
        position: absolute;
        content: '';
        width: 10px;
        height: 10px;
        border-radius: 50%;
        left: 8px;
      }


      &.alarm1 {
        background: #fdf7f3;

        &::before {
          background: #FF6310;
        }
      }

      &.alarm2 {
        background: #fdf4f4;

        &::before {
          background: #e6736f;
        }
      }

      &.alarm3 {
        background: #fcfaf3;

        &::before {
          background: #CCAE27;
        }
      }
    }

    .space {
      width: 100%;
      height: 10px;
    }
  }

  @keyframes blink {

    0% {
      opacity: 0.3;
    }

    50% {
      opacity: 1;
    }

    100% {
      opacity: 0.3;
    }
  }

  @media screen and (max-width: 1600px) {
    #friction-welding {
      .main-con .bottom .middle-content {
        padding: 0 10px;
        max-height: calc(100% - 240px);
      }

      .bar-item {
        font-size: 12px;
      }

      .title-con {
        font-size: 22px;
      }

      .common-item {
        .title {
          font-size: 12px;
        }

        .status {
          font-size: 12px;
        }
      }

      .bottom {
        max-height: calc(70% - 170px);
        min-height: 70%;

        .center .position {
          .common-item {
            padding: 0 20px !important;
          }

          .title {
            font-size: 14px !important;
          }

          .status {
            font-size: 18px !important;
          }
        }

        .left-content,
        .right-content {
          padding-bottom: 0 !important;
        }

        >.right {
          .content {
            >.left {
              .common-item {
                .title {
                  font-size: 13px !important;
                }

                .status {
                  font-size: 16px !important;
                }
              }
            }

            >.right {
              .common-item {
                .title {
                  font-size: 14px !important;
                }

                .status {
                  font-size: 18px !important;
                }
              }
            }

            .work-status {
              font-size: 16px !important;
            }

            >.center {
              padding: 10px !important;
            }
          }
        }

        >.left {
          & .common-item {
            .title {
              font-size: 13px !important;
            }

            .status {
              font-size: 16px !important;
            }
          }
        }
      }
    }
  }
</style>
<style>
  body,
  html {
    width: 100%;
    height: 100vh;
    margin: 0;
    padding: 0;
    overflow: hidden;
  }
</style>